独学で進めてます

ワイヤーフレーム

前回より間が空きましたが、予定通りワイヤーフレームを作っていきます。ここで言うワイヤーフレームはWebサイトの設計図、という言い方をされたりするものです。

前回お話ししたように、自己批判ショーを会社に見立てた採用サイトを制作していきます。まずは必要になりそうなページをピックアップ。今回の作業では世にある採用サイトを参考に無理のないページ数に設定。トップページ+アルファで6ページとしました。

そのピックアップした各ページのどこにどのような情報を載せていくか、という設計図を作っていきます。

で、この設計図、普段なら紙の上でざっと書いて決めていくのですが、今回はAdobeXDというソフト(のβ版)で組み立てます。

XDを使うのは初めてですが、Photoshopやillustratorを触れる人ならすんなり使えそうですね。XDはAndroidやiOSのパーツも選択できるようになっていてありがたい作り。

一通り組んで見たトップページ等がこれです。(png画像になっています)

スマートフォン
PC

この段階ではデザインの詳細は詰めず、構成を決める・・・つもりなのですが、XDみたいなソフトを使ってると見た目も整えようとしてしまいますね。ここで詰めてしまうのは本来時間の無駄。どういう情報をどの位置に載せるかがわかればヨシとします。

パララックス効果

画面デザインは一時停止して、web技術確認のコーナーです。

前回名前を出した『パララックス効果』。ウェブをやる人にとっては新しいものではありません。使われているのを見てみるのが早いですね。

サンプルページ

開いたページをスクロールして見ましょう。写真の内容は置いておいて、背景写真と文字情報部分でスクロール速度が違う、ズレがある、という効果がわかると思います。

これがパララックス効果、視差効果などとも言われるやつです。使い方次第で見た目の派手さ、面白さを演出できますが、この仕掛けでユーザーにスクロール操作を促す、というのが重要になります。効果的に設定することで縦に長いページでも最後までスクロールしてみてもらう、ということが狙えるわけです。

今回の採用サイトではトップページに使ってみようか・・・?というところです。やりすぎるとうざくなるので、個人的には諸刃の剣と考えています。


次回は画面デザインを進めていく予定です。

「ダブルオーゼロ」よりスタッフとして参加。スタッフ兼エキストラとして活動していたが、2012年より役者にチャレンジ。

コメントをいただけるとメンバー一同喜びます