ワイヤーフレームとは？
受講日：2025年05月09日
ワイヤーフレームとは
- デザインの設計図
- ヒアリング・ワイヤーフレーム制作→デザインラフ制作→コーディング
- いいデザイナーは、ワイヤフレームの設計が上手い。
- ワイヤーフレームの設計がしっかり出来ているかでその後の作業効率が変わってくる。
- 制作会社への就職を目指したい場合、LPのデザインに力を入れると良い。
コーディングは1個頑張って作り、その後はLPデザインを沢山作っていく。 - ワイヤーフレームができていないのにデザインを進める事は、家の骨組みができていないのに、壁紙の色を決めるようなもの。
ワイヤーフレーム作成のポイント
作成の注意点
- サイズは必ずpxで指定する。
- コンテンツ幅を決めておく。しっかり余白を取る。
幅960pxがデフォルト。パスでガイドラインを取っておく。 - ファーストビューはすごく大事！大体高さ600pxくらいで設定。
必須情報を納める＆魅力的に見せるようにする。
作成のコツ
- 同業他社のサイトを観察する。
- 自分だったら何を基準にCVするかを箇条書きにすると良い。
- 箱の中にコンテンツを作り、箱を縦積みしていくイメージ。
- 情報整理が大切！文字量や文字サイズによって、写真の大きさや全体の箱のバランスが変わってくるので、情報がすぐ出るのであれば、早めに細かく記載しておく。写真は何pxで置くか、文字のサイズは何pxか、予約は何pxかまでワイヤーフレームで設定をしておく。
- 参考LPの検証ツールで、3つ～4つデータを取って参考する。どのくらいのフォントサイズ？
- フォント・色・ロゴ・写真は後、まずサイズ感・比率・余白のような骨組みの部分。
- 余白はスクリーンショットを取って、ワイヤーに重ねてチェックしてもOK。
- 文章コンテンツの作成には、AIチャットを活用してもOK！
- 世の中のデバイスは、8で割り切れるサイズになっているので、コンテンツのサイズや余白は、8の倍数かつ、整数で設定するとよい。
LPとは？
LP（ランディングページ）とは
- ランディングページ=Landing Page。（Land=着地する）
- 検索結果や広告などを経由して訪問者が最初にアクセスするページ。
- LPの目的：ユーザーに購入や申し込みといった「コンバージョンをしてもらうこと」。
1番大事なのは、オシャレさより、CVを獲得する事！
LP作成のポイント
- ストーリーをデザインする。
- 掴み→説明→魅せる。起承転結の「結」から書く。
例）ダイエット器具だったら、これを使えば痩せます!!なぜなら…
という風に、上から順に並べると分かりやすい。 - バナーと同様に、他のサイトを真似してみる。
- コーディングありのLP：Google・Yahooのアルゴリズムを考慮する。SEOで上位を狙い、アクセス数を増やす。
- コーディングなしのLP：Google・Yahooのアルゴリズムを考慮しない。楽天市場やAmazon・広告でアクセスを増やす場合は、画像で対応する事が多い。その方がコーディングの費用を削減して、自由な表現ができる。
ワイヤーフレームの作り方
- 「誰のため」「何のため(購入・問い合わせ等)」を設定する。
- 掲載する情報をラフで書き起こす。
- 画像や文字のサイズ・比率・余白を具体的な数字で設定する。
5月10日の授業の課題
受講日：2025年05月10日
- サイズ：総横幅1280px（コンテンツ幅960px）
- ソフト：Photoshop
- 新規ファイル作成時に「アートボード」にチェックを入れる。
または該当レイヤーで右クリック＞新規アートボードを作成を選択。
作品：リゾートホテルのLP
- 誰のため：40～50代または新婚旅行の夫婦
- 目的：リゾートホテルの予約申込
- 使用ソフト：Photoshop
- 作成時間：4時間
