当記事はWEB制作を学習し始めて50週間、どんな状況でどんな勉強をしているのかまとめています
未経験、異業種、プログラミングの事は全く分からない私が、デイトラで学んだらプログラミングができるようになるのか？という趣旨で発信しています。
- 未経験でもできるの？
- 他の人がどんな風に勉強しているのか知りたい。
- どれくらい時間がかかるもの？
そんな方の判断材料になれば幸いです！
webデザインの勉強、いただいた案件のコーディングを行った１週間でした。
webデザインのことは簡単に学習していたものの、実践レベルでは到底ないので悪戦苦闘しています。
まずはワイヤーフレームから学びました。
参考にしたサイト
web制作をしている中で何度も耳にした「ワイヤーフレーム」という言葉。
実はよくわかっていません。知ったかぶりをしていました🙄
概要から理解するために、検索上位サイトを見て学習しました。
ワイヤーフレームとは？
ワイヤーフレームとは、Webサイトやアプリケーションの設計段階で作成される簡略化されたレイアウト図のことです。
これにより、ページの構造や要素の配置、情報の流れを視覚的に確認できます。ワイヤーフレームはデザインの初期段階で作成されるため、配色や画像、装飾といった詳細なビジュアルデザインは含まれず、あくまで骨組み（構造）を示すものです。
主な目的
• 情報設計の可視化: コンテンツの優先順位や配置を決め、ユーザーが情報をどのように受け取るかを設計します。
• チーム間の共有: デザイナー、開発者、クライアントとの認識を統一し、スムーズなプロジェクト進行をサポートします。
• 早期の課題発見: ページ構成や機能の問題点を初期段階で洗い出し、修正するコストを削減します。
種類
1. ローファイワイヤーフレーム（Low Fidelity）
手描きやシンプルなデジタルツールを使い、ざっくりとした構成を示します。
2. ハイファイワイヤーフレーム（High Fidelity）
詳細な要素を含めた精密なレイアウトで、デザインや開発に近いイメージを伝えます。
ツール
Figma、Adobe XD、Balsamiqなどのツールが広く利用されており、チームでの共有や修正が容易です。
Adobe XD、Balsamiqは有料ツールになるため、figmaで慣れるのがいいのかな？と感じます。私はfigmaを使用して作成しました。
基本的にはグレースケールで細かい箇所は決めずに、大きな配置を考えていく設計図、骨組みを指します。ローファイワイヤーフレームと呼ばれるものです。
ワイヤーフレーム作成順番
サイトを作る初期段階のため、大枠から決めていくことが必要です。
- サイトに必要な要素、情報を書き出す。
- 情報の優先度を決める、優先順位の高いものから上に配置する。
- レイアウトを決める。
- 手書きでラフを書き、ツールで清書する
サイトに必要な要素、情報を書き出す
ページに必要な要素を書き出すことから始めます。思いつくまま書き出します。
■トップページの場合
- 基本情報
- 企業ロゴ
- お問い合わせ
- キャッチコピー
- メインビジュアル
- 導入事例やお客様の声
- 商品・サービスの特徴
- 商品・サービス、会社が選ばれている理由
■ランディングページの場合
- 導入文
- 導入の流れ
- お問い合わせ
- よくある質問
- キャッチコピー
- アイキャッチ画像
- 商品・サービスの情報
- メディア掲載実績や体験談
等など、大まかな流れはテンプレートや競合他社をみて参考にします。
情報の優先度を決める
書き出した必要な情報、要素を優先度の高いものから並べます。
レイアウトを決めるときに、優先度を高いものをwebサイトの上に配置するためです。
1. ユーザー体験（UX）の向上
• ユーザーは限られた時間で目的の情報を探します。優先度を明確にすることで、重要な情報を最初に提示し、迷わせない設計が可能になります。
• たとえば、ECサイトでは「セール情報」や「新着商品」をトップに配置し、購入につながる動線を作ることが重要です。
2. ビジネス目標の達成
• サイトの目的（例: 購買、問い合わせ、会員登録）に直結する情報を目立たせることで、コンバージョン率を高めることができます。
• 優先順位を明確にすることで、ユーザーに必要以上の選択を迫らず、自然な誘導が可能です。
3. 誤解を防ぐ情報設計
• 情報が雑然と並んでいると、ユーザーが何をすべきか分からず、離脱の原因になります。
• たとえば、複数のCTA（Call to Action）が同じ強調度で配置されていると、ユーザーは混乱する可能性があります。
4. デザインと開発の効率化
• 情報の優先度が決まっていると、デザイナーや開発者は重要なコンテンツにフォーカスした設計を行いやすくなります。
• 限られたスペースやリソースの中で、最適な構成を考える手助けになります。
5. ユーザーの視線を意識したデザイン
• 人の視線は「Zパターン」や「Fパターン」のように特定の動きがあります。情報の優先度を元に視線の動きをデザインに取り入れることで、ユーザーが情報を自然に追いやすくなります。
優先度を決めるポイント
1. サイトの目的を明確にする: 何をユーザーに達成してもらいたいかを把握する。
2. ターゲットユーザーを理解する: ユーザーが最も求めている情報は何かを特定する。
3. コンテンツの重要性をランク付けする: 情報を「必須」「推奨」「補足」に分けて配置を考える。
情報の優先度を決めることは、ユーザーとビジネスの両方に利益をもたらす、Webデザインの基本プロセスです。しっかりと優先順位を設計に反映することで、使いやすく効果的なサイトを構築できます。
レイアウトを決める
情報の優先度を決めたら、レイアウトを考案します。
線とブロックで大まかな配置を決めていきます。ここでは画像を載せたりせず、どこにどのコンテンツを表示するかを考えます。
Web制作におけるワイヤーフレームのレイアウト設計では、以下のポイントを重視することで、ユーザー体験（UX）を向上させ、目的に合った効果的なデザインを実現できます。
1. ユーザーの視線の動き
• 人の視線は一般的に「Zパターン」や「Fパターン」に沿って動きます。これを意識して、重要な情報や要素（ロゴ、メニュー、CTAボタンなど）を自然に目に入る位置に配置します。
• たとえば、サイトの最上部にはロゴとメインメニューを、ページ中央には目立つ見出しや画像を配置することが多いです。
2. コンテンツの優先度
• 各要素の重要性を明確にし、高い優先度を持つ情報を目立つ位置に配置します。
例: LP（ランディングページ）では、ファーストビューにユーザーの注目を引く要素（キャッチコピー、商品の画像など）を配置します。
• 補足的な情報や詳細な説明はスクロールで追いやすい位置に配置します。
3. ユーザーの目的をサポート
• ユーザーがサイトを訪れる理由や目的に応じて、レイアウトを設計します。
例: 情報収集が目的のサイトでは、コンテンツの一覧性を重視し、検索やカテゴリ分けを分かりやすく配置します。
購買が目的の場合は、商品情報やカートボタンを直感的に操作できるレイアウトを採用します。
4. 一貫性
• ユーザーは統一感のあるデザインに安心感を覚えます。
レイアウトの基準を明確にし、見出し、余白、画像サイズなどを一貫して配置します。
また、ナビゲーションやCTAボタンの位置やデザインを統一することで、操作のしやすさが向上します。
5. レスポンシブデザインの考慮
• 現代のWebデザインでは、スマートフォンやタブレットでの閲覧を前提としたレイアウト設計が必須です。
• ワイヤーフレーム作成時に、PC版とモバイル版それぞれのレイアウトを想定し、要素を最適な順序に並べます。
6. ビジュアルヒエラルキー
• 「重要なものほど目立つ」という原則を基に、フォントサイズ、太さ、色のコントラスト、余白を使って情報の階層を表現します。
• ユーザーが自然と「どこから読み始めるべきか」理解できるレイアウトを作ることが重要です。
7. 余白（ホワイトスペース）の活用
• 余白を適切に使うことで、ページがすっきりと整理され、視認性が向上します。
• 詰め込みすぎたデザインはユーザーを混乱させるため、必要に応じて情報を削ぎ落とすことも重要です。
これらのポイントを押さえ、ユーザー目線を中心にレイアウトを設計することを意識します。
手書きでラフを書く
まずは決めたレイアウトを形にするために、手書きでもなんでも、書き出していきます。
手書きをおすすめするサイトが多くて意外でした。ツールより直感的に作業できるからでしょうか。
私が初めて作るときも、紙に四角をたくさん書いてイメージを書き出しました。
ワイヤーフレームを作成してくれるサービス
このサイトでサイト概要、作りたいサイトイメージを入力するとディレクトリマップ、ワイヤフレームなどを自動で生成してくれます。
日本語も対応している、無料で使用できる、非常に使いやすいです。
figmaにプラグインを入れるだけで使用できますので
- ワイヤーフレームを作ったことないけど作る必要ができた
- 複数の案を出す必要がある
ときなどに重宝しますね！
フリープランだと１サイト、トップページのみ作成となり、有料プランで全ページ作成されます。
一月$38となかなか高額なので、ペイできるだけ受注することができ始めたら有料プランを使用していきたいと思います。
細かいところは修正が必要そうなのですが、大枠を決めるのに役立ちそうです。
【web制作】ワイヤーフレームについて学習する
web制作を始めて50週になりました。案件の対応をしています。一年は52週間のため、もう少しで丸一年経ちます！
自己投資として始めたデイトラですが、自己投資としてお金を出すなら、１年以内に回収の目処を立てるというのが一つの目安になっていたのでなんとか回収の目処が立ってきました_(:3」∠)_
クラウドソーシングではデザインからの作成が多いので、初案件を基にデザインも学習していきます。
デザインの基礎となる、ワイヤーフレームについて意味から概要、必要性までを学習した１週間でした。
これからはデザインの模写や言語化をして実用的になるようにしていきます。
これからも続けたらどうなるか？を更新していくので見て頂ければ幸いです。
リスキリング(大人の学びなおし)やIT人材不足はまだまだ続いていきます。勉強を始めるのに遅いことはありません。
自分も何かのスキルを得たい、変わりたいと思っている方、
一緒に頑張りませんか？
WEB制作のスクールは安い買い物ではありませんが、
頑張るだけの価値はあると感じます。
＼デイトラを受けるならここから／
