ウェブフロー上達のステップ
ウェブフローを学ぶ最良の方法は、実際にウェブフローで構築することです。このガイドブックを最大限に活用するために、これから説明するすべてのステップを実践してみてください。
この編集画面では、ウェブサイトを構築するために必要なすべてが表示されます。
左側にはコンポーネントの追加と編集に必要なもの、右側にはそれらのコンポーネントのスタイル設定に必要なものがすべて表示されます。
ウェブフローでは、デザイナー機能の左側にある最初の 3 つのボタンが HTML 要素に使用するものです。
デザイナー機能を使ってみよう！
それでは、デザイナー機能の左側にある最初の 3 つのボタンを触ってみましょう！
1つ目は、「要素の追加」パネルです。ここでは、div、ボタン、テキスト、画像、フォームなどのコンポーネントを追加することができます。
2つ目は、「シンボルの追加と管理」です。これらは、ナビバーやフッターのように、あらかじめ保存して複数のページで再利用できるセクションです。
3つ目は「ナビゲーター」で、コンポーネントの階層と構造を確認できます。
1.ボディ（ページ本体）の設定
まず、キャンバスに要素をドロップする前に、ボディ（構築するメインページ）の書体とフォントサイズを決定しましょう。
まず、ナビゲータで「本体（body）」を選択します。次に、右側のスタイルパネルで、「本体（全ページ）」というクラスを選択します。
このクラスで行ったスタイル編集は、ウェブサイトの他のページで再利用できます。
たとえば、すべてのページにメインの背景色を追加する場合、ここでそれを行います。今回は、デフォルトの白のままにしています。
2.フォントの調整
基本的なフォントとサイズを設定するために、「Typography」でリストからフォントを選択します。プロジェクト設定でカスタムフォントを追加することもでき、その場合はドロップダウンに表示されます。ここではVerdanaというフォントを選択し、次にベースとなるフォントサイズを選択します。16pxはフォントサイズの標準です。高さに「1.4-」を追加すると、フォントの高さがフォントサイズの1.4倍になるようにします。※高度なWebタイポグラフィとフォント設定についてもっと知りたい方は、こちらのビデオをご覧ください。
3.要素の追加
それでは、いくつかの要素を追加してみましょう。
- まず、あらかじめ用意されているナビバーを追加します。
- 次に、その下にヒーローセクション（=ウェブサイトで一番目に付く場所のこと）のための「Section div」を追加します。
- 「Section div 」をドロップしたら、それにクラスを追加して「Hero Section」と名付けます。これで、ナビゲータですべての要素をきちんと見ることができるようになります。
- ナビバーのスタイルを変更します。まず、背景をBodyと同じ色にします。ナビゲータでナビバーを選択し、あとはスタイルパネルで背景色を変更するだけです。
- ロゴを追加してみましょう。ロゴはPNGかSVGで保存しておき、ウェブフロープロジェクトのアセットマネージャーにアップロードしてください。そこから、アイコンアセットをキャンバスにドラッグ＆ドロップします。ロゴのパディングを調整し、追加のナビゲーションリンクを追加してみましょう。新しいナバーリンクの追加は、MacではCommand CとCommand V、WindowsではControl CとControl Vをコピー＆ペーストするだけで簡単にできます。
4. ヒーローセクションの作成
- まず、ヒーローセクションにコンテナを追加します。
- 現在のウェブフローのホームページを（ちょっとだけ）再現したいので、コンテナにGridも追加する必要があります。グリッドが追加されたら、その上で右クリックして、デフォルトの余分な行を削除します。ボックスモデルに戻ると、各列に div を追加し、クラス (Left Column Grid と Right Column Grid) を追加して、適切にラベル付けし、後でスタイルを設定できるようにします。
- Right Column Grid に画像要素を追加し、Left Column Grid 内にコンテンツを追加できるようにしました。
- 見出し、段落、ボタンから始めます。上のビデオにあるように、要素を追加するには、キャンバス上にドラッグ＆ドロップするか、ナビゲータに直接ドラッグ＆ドロップします。グリッドで作業する場合、ナビゲータ内で整列させる方が簡単です。ご覧のように、段落はキャンバス上ではなく、ナビゲータに追加しました。
- これは、要素が思い通りの場所に配置されていなかったためです。
- コンテンツを追加して、右側のスタイルパネルでスタイルを整えることができます。フォントサイズを調整し、スペーシングのためにマージンを追加してみましょう。
5.配置や余白の調整
では、CTA（コール・トゥ・アクション）ボタンからもう少し見栄えを良くしてみましょう。
- ボタンの色を変え、ボタンのテキストと実際のボタンの内側の縁の間にパディング（空間の余白）を追加してみましょう。
- 要素の中にスペースを作る場合はpadding、要素の外にスペースを作る場合は「margin」を使用します。例えば、見出し、段落、ボタンを分離する場合、これらの要素の間にスペースを作りたいので、「margin」を使用します。しかし、ボタンについては、ボタン要素の内側にスペースを作りたかったので、「padding」を使用しました。
- ヒーローセクションにパディング（余白）を追加した後、Right Column Grid内の画像を中央揃えにして、Left Column Gridと一直線になるようにします。
これを行うには、先ほど作成したRight Column Gridを選択し、スタイルパネル内で、Align to Center（中央揃え）をクリックするだけです。これで、Right - Column Grid内のすべてのコンテンツがボックスの中央に配置されるようになります。
- すべてのクライアントを表示するセクションを追加してみましょう。
- 5 列のグリッドを作成したら、グリッドのクラス名を「Client Logo Grid」に設定しましょう。
- アセットマネージャにロゴをアップロードします。ここでは、デモのために1つのロゴを5回使用します。
- ロゴをグリッドの各列にドラッグ＆ドロップするだけです。最初の画像をドロップした後、ロゴがグリッドの真ん中に来るようにしたい。
- ロゴを中央に配置するには、画像を選択し、スタイルパネルで[中央揃え]をクリックします。
- 5つのカラム全てに同じロゴを使っているので、上の動画では単純にコピー＆ペースト（MacではコマンドCとコマンドV、WindowsではコントロールCとコントロールV）しています。
ホームページの完成！
最初のホームページの土台が完成しました。
初心者がどのようにウェブフローにアプローチすればよいのか、理解していただけたでしょうか？
ここまで来れば、あなたのウェブフロー開発スキルはあっという間に開花するでしょう！参考までに、私のナビゲーターはこんな感じです。コンポーネントの配置に注目してください。
最後に…デザインがパソコンのデスクトップできれいに見える事は確認できますが、タブレットやモバイルではどうでしょうか？
次回、全てのユーザー媒体で綺麗な表示を可能にする「レスポンシブデザイン」について紹介していきます！