ワイヤーフレーム製作
ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多い
逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明になる
製作物
使用ソフト
XD
概要
今後、ランディングページ制作のためのワイヤーフレームを作成しました。
テーマは「ExcelVBA代行屋」の予定です。
制作にかかった時間
4時間
- 下書き・・・2時間30分
- XDでの作業・・・1時間30分
制作のポイント
サービス内容のセクションにて、3種類紹介しているブロックを作成する際に、まず一番左の1種類を完成させ、リピートグリッドを使用して他の2種類を作成しました。
「サービス」「事例紹介」「料金について」「FAQ」のセクションの上余白は、ヘッダーの高さにしました。理由は、ヘッダーを固定させ、ナビゲーションを押すと、押したセクションにスクロールさせるためです。
「料金について」セクションは、右側の要素(画像)だけブラウザ端まで広げるレイアウトにしてみました。
CSSのcalc()で片方の要素だけブラウザ端まで広げるレイアウトの作成方法 | Recooord | Web制作で扱うコーディングスニペットを紹介
上記の図のように、コンテンツ幅のある要素を画面中央に配置して、片側だけ画面幅いっぱいに要素を広げます。以下のサンプルをスクロールしてご覧ください。
recooord.org
