SIM私がWEBサイトのワイヤーフレームを作る時に注意していることをまとめたWF作成マニュアルを紹介します。
ワイヤーフレーム制作の心構え
初心者のうちはワイヤーフレーム（以下、WF）制作で手が止まって作業が停滞することが多いです。
この「作業に詰まった時の対処法」を頭に入れて作業すると効率が幾分アップします。
SIM「作業に詰まった時の対処法」を含めて、意外と「忘れがちなこと」や「注意点」を順に紹介していきます。
WF制作で忘れがちなこと
まずは、「WF制作で忘れがちなこと」なことから紹介します。意外とコレが一番重要だったりします。
- フリーハンドで大枠をデザインする｜鉛筆と消しゴム
最初からFigmaやXDやIllustratorで作図してしまうと、最初に書いたデザインに縛られて作業が進まなくなることが多々あります。
この対策としては、最初はスケッチブックやノートにフリーハンドでラフデザインを描くところから始めるのが効果的です。鉛筆と消しゴムで気に入らなければ何度も消して書き直したり、あるいは部分的に修正したりするようなイメージです。
鉛筆でラフに描くことに効果があるのかというと、鉛筆ラフは「所詮は下書き」と脳が認識するため失敗を気にせずどんどんアイデアが試すことができるからです。
逆に最初からアプリケーションを使うと無意識に「これは清書だ！」と認識するため必要以上に慎重になって、筆の進みが遅くなり、少し詰まると作業が長らく停止してしまいがちです。
SIMだがしかし、フリーハンドでWFを書き始めたところで作業の停滞を止められるとは限りません。そんな時のために以下の対処法を紹介します。
作業に詰まった場合の対処法
- 鬼のインプット（基本、インプットが足りてない）
- 詰まったり、不明点が出たら都度参考サイトを見てインプット
- 納得いくまで作り直す
- 最初に作ったサイトテキストは臨機応変に変える
- 最初に作ったページ内構成も臨機応変に変える
- 労を惜しまずに手を動かしていると意外とアイデアが浮かんでくる
インプットの方法
基本、初心者はインプット量が圧倒的に足りていません。ですので、作業の停滞は「自分の引き出しの枯渇」を意味していることが多いです。ベテランデザイナーも日々のインプットを欠かさないので、困ったら「ギャラリーサイト」や「雑誌読み放題」などで大量にインプットしましょう。
SIM私は楽天経済圏の人なので楽天マガジンを選びましたが、ドコモ経済圏ならdマガジンがオススメです。
インプットのコツですが、闇雲に資料を閲覧しても効果が見込めません。私の場合は下記のようにインプットするように心がけています。
問題点の細分化 ＞ 作業の停滞の原因となる要素を特定 ＞ 停滞の原因に的を絞って大量インプット
当然ながら原因の種類によってインプット源が異なります。
たとえば、ファーストビジュアルが原因なら、ファーストビジュアルに絞って大量インプットします。ちなみにファーストビジュアルを高速に閲覧できるギャラリーサイトはこちらです。サムネイルがそのままファーストビジュアルになっているので実際のページに飛ばなくても閲覧できて効率が良いです。
現代デザイン Webデザインギャラリー・サイトリンク集
https://gendaidesign.com/
「あしらい」や「見出しデザイン」が原因なら、ギャラリーサイトよりも業界の雑誌を見まくるのが意外と効果的だったりします。初心者さんはギャラリーサイトを参考にする人が多いですが、ここで紙媒体のデザインを参考にすると、デザインの差別化が期待できます
雑誌デザインを大量に見るなら、「楽天マガジン」や「dマガジン」などの雑誌読み放題サービスが便利でオススメです。私は「楽天マガジン」をインプットに愛用しています。
納得いくまで作り直す
WF制作段階でも、「サイトテキスト量がイメージに合わない」や「セクション内構成に違和感がある」などでモヤモヤした気分になるとことが多々あります。
こういう場合は、直感的に修正ポイントを意識しているケースが多いので、迷わず修正すべきです。
とうぜん大枠デザインに対してモヤモヤしたら、最初の「フリーハンドで描く」のところから描き直しです。ただし、全部描き直すのではなく、モヤモヤの箇所に絞って作業をするとスピードが上がります。
労を惜しまずに手を動かしていると意外とアイデアが浮かんでくる
あと、大事なのは手を止めないことです。労を惜しまずに常に手を動かしていれば意外とアイデアが浮かんでくることが多いです。
停滞したからといって、落ち込んで気分転換という名の逃避行動に走っても状況は改善されないので注意して下さい。
作業に詰まった場合の対処法と注意事項
SIM最後、「意外と忘れがちな心構え」を紹介します。
- １回で完成品ができると思わない
- 失敗せずにスマートに作業が進むと思わない
作業中は忘れがちですが、「１回で完成品ができると思わない」ことです。同様に「失敗せずにスマートに作業が進むと思わない」とも思わないことです。
WF制作に限らず何事もトライ＆エラーを繰り返して進んでいくものですので、失敗することを前提でWF制作に望むのが正しい心構えです。
SIM以下、WF制作で私が意識していることをメモ代わりに書き出しておきます。
トップページのWFデザイン
- ページ構成やセクション構成は前出の方法で制作済み
- 基本的にはコンテンツ（おもにファーストビジュアルを含むセクション内）の配置がザックリ決まれば良い）
- フォントサイズもこの段階でザックリ決まれば良い
投稿ページなど文章メインのページ
文章が読みやすいように、コンテンツ幅と行内文字数に注意してデザインする。
日本語の場合、一般的には、コンテンツ幅を500px〜750px程度にし、１行あたりの文字数は30〜40文字程度が読みやすいとされている。
- 500px～600px: 日本語の場合、この幅で1行あたり30～40文字程度となり、読みやすさが高いとされている。
- 600px～700px: より多くの情報を表示できる幅で、1行あたり40～50文字程度となります。記事の内容が多い場合に適している
- 750px: 日本語のコンテンツ幅の上限とされる値です。この幅では、1行あたり50～60文字程度となります。あまり幅が広すぎると、読みやすさが低下する可能性がある。
トップ・下層ページ共通
- 各セクションの要素デザインを変える＞同デザインが続くと単調になり、可読性が落ちる
- 文章は少なめで、画像やイラストで説明＞長い文章は分解して構造化すると良い
- 余白を広く確保すると、洗練して見える
- 一度設定した余白にパット見で違和感を感じ場合、実際に納得行くまで変更を加え続けると丁度良い感じの余白設定が見えてくる
- 見出しは別フォントで目立たせる（画像にするケースも多い）と効果的
関連記事
余白とフォントサイズの目安
AIによるサイト構成、ページ構成、サイトテキスト作成の自動化
