ノーコード bubble 解説_テンプレートを参考にする時のポイント

フリーテンプレートを真似してサイトやアプリを作る事は早いだけでなく勉強になります。ただ、真似すると言っても作る順番が違うと選択項目の中に同じ物が無かったりして途中でつまずいてしまいます。そうならない為のポイントをまとめたページです。

 

目次の順番で制作するのが良いと思いますが特に気を付けるのは7より先に8をしない方がすんなり行くと言う事です◎1〜6はデザインに関係しています。7を一番最初にやってもOKです。

 

 

bubbleのFree template、Startly-Startup Landing PageをUse templateからダウンロードして使います。

→詳しいダウンロード方法

 

Startly-Startup Landing Page(以下:テンプレート)の編集画面を見ると大きく分けて7つのブロック(+ヘッダーとフッター)で出来ている事が分かります。index1ページで他ページはありません。

 

1.Elements treeの構造をよく見てその通りに作る

左側の上にあるElements treeエレメントツリー、

 

7つのブロックはそれぞれGroupの中に入っています。1の色々な物(テキストや画像や、、要素)は「Group Content1」の中に入っています。2の要素は「Group Solutions」の中、、と言う様に。例えば1のGroup Content1の横の「+」マークをクリックすると中身が見れます。

 

「ー」マークも何も無くなったらそれが1番小さい単位の要素です。
Group imageの中には同じ名前のGroup imageが入っていて白い線の丸です。その中には少し小さい白い線の丸Group circleが入っていて、、どんどん開いて行くと1番最後は(プラグインで入れた)Material Iconで作った三角形のアイコンが入っています。

 

同じように作ったつもりでもこんな事があります。

右はお手本にしている(ダウンロードした)テンプレート、左は真似して作っているサイトです。Group imageの位置に注目してください。

テンプレート:Group Content1>Group image
真似:Group Content1>Group First Screen>Group image

見た目、デザイン的には同じ位置にあってもElements treeの構造で見ると違います。真似の方はGroup Content1直下ではなく、その中のGroup First Screenの中、つまり2つ下の階層に入っています。(真似のGroup imageの左に「+」が無いのはこの中に要素を作っていないからなので気にしないでください)

 

真似(間違い):Group Content1>Group First Screen>Group image

 

真似(正解):Group Content1>Group image

 

テンプレートを真似する場合はElements treeの中を見て階層も同じにします。でないと同じ動きをしてくれません

 

 

2.どれを使って作ったのかを見てその通りに作る

左にずらっと並んだボタンVisual elements、Containers、Input formsの中のどれを使ってデザインしたのかを調べて同じ物で作ります。

 

黒い窓の中をよく見る

先ほども書きましたがこの三角はMaterial Iconで作っています。

どうして分かるの?

黒い窓の一番上に「MaterialIcon〜」と書いてあるからだよ

 

この白線の丸はGroupで作ったので「Group 〜(Image)」となっています。「〜」の部分は作った人が任意で付ける事が多いです。ヘッダーにあるから「〇〇 header」のように。
Groupの所を変更してしまう場合もありますがテンプレートの場合は
ほとんどそのまま残っているのでその点でも分かり易いです。そして真似しているうちに何を使って作ったかは分かって来ると思います◎

ちなみにこの白線の丸、Iconで作ったのかと思いきやGroupで作っていました。Roundnessを200にする事で四角を丸にしています。

 

上の太文字と下の細文字はTextで、左の四角いメールを入力するスペースはInputで、緑のボタンの形をした物はButtonでは無くLinkで作っていました。Linkで背景色を付けて角を少し丸くしてボタン風にする事も出来ると分かります。

 

3.黒い窓のConditional、Transitionsも真似する

黒い窓で通常表示されるAppearance(外観)だけでなくConditional(条件)、Transitions(遷移)も横に(1)など表示がある場合は真似します。

このGroup AnnouncementsのConditionalではマウスホバーした時の色の変化を設定しています

少ーし青(#FAFBFF)くなるんだね

 

 

4.縦は何pxでもいいが、横は真似する

パソコンでもスマホでもその他でもデザインが崩れずちゃんと見れるようにするレスポンシブデザインbubbleで作る時も左上のResponsiveタブで設定出来ます。

ノーコード bubble 解説_レスポンシブデザイン

画面のが何pxの時は横に3つ並んでいるのを縦に3つ並べる、が何px以下になったらパソコンの時は表示していたヘッダーのメニューをハンバーガーメニューにして省スペースにするなど他にも色々設定出来ます。慣れてくれば自分で出来ますが、

 

テンプレートを真似する時は画面全体の横幅もデザイン1つ1つ(エレメント)の横幅も同じにした方が良いと思います。縦は後から変更しても中に作ったエレメントに影響が無いので大丈夫です◎

 

 

5.プラグインを確認して同じ物を入れる

上で説明した三角を作っているMaterial Iconですがデフォルトでは左のメニューにありません。このテンプレートを作った方がプラグインで入れたのです。真似してサイトを作ろうと思ったらプラグインで入れる物も(可能なら)同じにします。

 

PluginsタブをクリックするとGoogle Material Iconsが入っているのが分かります。入れた数だけここに並びます。有料無料ありフリープランでやっている場合、有料の物は入れられないようです。

右には”ElementsにMaterial Iconと表示される”と書いてあります。

Iconはデフォルトで1つ入っているよね?

線の細さや種類が違う物もあるからかしら

 

 

6.編集画面で見えていない所も表示して真似する

Preview、実際の表示で見るとAの文字がふわっと出て来てその後Bの文字も出て来ます。このABは編集画面では最初見えていません

 

Elements treeのOnly show hideable(非表示のみを表示)にチェックを入れると隠れていたエレメントが表示され、クリックすると目が開いて見えます。

 

デザインが終わったらデータベースへ行きます。

 

7.データベースを真似する

この後に解説するワークフローをやる前にデータベースをやるのがつまずかないポイントです。データベースで作った物がワークフローの選択項目で必要になったりするからです。

 

データベースはワークフローの前にやる。デザインの前にやってもOK

テンプレートのDataを見るとこんな感じです。Data typesにInquires(お問い合わせ)Portfolioなど”タイプ”があります。デフォルトではUserだけなので他の3つはサンプルを作った方が作った項目という事になります。

 

Field typeに何を入れればいいのか?

データ設計をしていくと自分で新しいフィールドを作る(上の画像のCreate a new fieldボタン)場面があります。

1のField nameは分かり易い名前を入れます。2のField typeは何を選択すればいいか慣れるまで迷うかもしれません。

 

そんな時はテンプレートの真似をすればだんだん分かって来ると思います。1がField nameで2がField typeです。2に適した型を選ぶ事で正しい設定項目が作られます。

 

Field name:description(説明)、Field type:text
Field name:image、Field type:image

分かったような、、でも正確には分からないなぁ

やっていくうちに分かって来ます、ホント

 

上で作った2つのフィールドがportfolioと言うTypeに追加されました。(imageのUploadは自動で付きます)

 

データベースが終わったらワークフローへ行きます。

 

8.ワークフローを真似する

テンプレートのWorkflowワークフローはこんな感じで四角が21個ありました。水色(シアン)が1つだけありますが(理由は分かりません)色はブルー、レッドなど変更出来ます。デフォルトはグレーです。

色を変更しても内容には影響しませんので自分が分かり易いように変更するのもいいかもしれません◎

 

このエレメントのワークフローは?

このエレメントにワークフローが付いているのか知りたい時はWorkflowページの四角の中から探してもいいですし、このようにDesignページの黒い窓のStart/Edit workflowをクリックする方法もあります。エレメントにワークフローを設定したい時も同様です。

 

クリックしたエレメントにワークフローが付いていれば一瞬赤く表示されます。今から作るという場合は新しく四角が増えます。

 

私はワークフローを真似して作る場合、最初に何個あるかメモして済んだ物はテンプレートの方の色を変えています。そうしないとうっかりクリックして増やしてしまうことがあるからです(て、増やしてしまっても特に問題は無いのですが◎)

 

 

四角をクリックすると更にStep1、Step2などと設定してある場合は表示されるのでこれも真似します。

 

例えば、、

 

テンプレートのWorkflowの左上に「When Page is Loadedページが読み込まれた時」があります。(この設定によりサイトを開いた時上の方に文字やメールアドレス入力、ボタンなどが出て来ます)

Step1、Step2をクリックして真似し終わって今Step3の中を見ている状態です。Group inputButtonを、どんなアニメーションで表示させるかを設定をしているのが確認出来ます。

選択項目をホバーするとデザインも確認出来ます◎

 

これを真似すると、

Step3、Click here〜をクリックすると上からAccount、Navigationなど設定項目が出ます。Element Actionsの中からAnimateを選択します。(この後に1つ上の画像のように黒い窓の中にElement、Animationを設定する〜と言う流れです)

 

Step3、4、5と来て6まで真似し終わりました。

 

実際にテンプレートを真似してサイトを作ってみたくなったらこちら◎

ノーコード bubble 解説_無料のテンプレート で勉強_1

 

おまけのデザイン視点

デザインを作る→データベースを作る→ワークフローを作る(データベースはデザインより先でもOK)、で1とヘッダーメニューだけですがサイトを作ってみました。

 

塊根植物、パキポディウム・グラキリス紹介サイトです。

 

スマホで見た場合(メニューはスマホサイズでは見えなくなります)。左は背景の三角のコントラストが強過ぎて文字が読みにくいのとメールアドレス記入の四角も枠が無いのでぼやっとしています。修正したのが右です。

 

同じ物をパソコンで見た場合。暗い三角にかかった文字が読めません。

 

修正したもの。PCサイズだとヘッダー右上にメニューが表示されます。「お手入れ不要の〜」「THIS IS〜」の文字やメールアドレスとボタンは参考にしていたテンプレートのように時間差で表示されます。

このサイトの下を続ける事もリンクでページを増やす事も可能です。

 

Inkscapeでサイトの素材を作る

せっかくbubbleでサイトやアプリを自作するならば。そこで使うイラスト素材もフリーソフトのインクスケープ(Inkscape1年生あります)で作れます◎

 

INKSCAPE ダウンロードとインストール

 

実際にInkscapeでサイト左上のロゴマークを作った様子です。

Inkscape ロゴを作ってサイトで使う方法

 

写真を下に敷いてトレースすれば、

 

簡単に作れます。サイトで使える形式で保存します

 

 

パキポディウム・グラキリス_06