こんにちは、さおり(@iropon30)です。
前回は自分の名刺をつくってみようという内容で記事を書きました。

今回はやっと!LPをつくってみようの記事です。
自分でクライアントさんを見つけたり…もいいですが、まずはワイヤーフレームからデザインをつくってみましょう。
流れとしては下記です。
- スケジュールを決める
- ワイヤーフレームを確認後、色々な項目を深堀りする(誰かにフィードバックをもらう)
- ロゴを制作する
- デザインする(誰かにフィードバックをもらう)
- デザインを校了する
ディレクターさんが配布しているサイト
ワイヤーフレームを配布している方はたくさんいらっしゃいますが、
今回はmogaBlog さんのケータリングのワイヤーフレームをお借りしてつくってみましょう!
初心者向けに現職Webエンジニアがデザイン、コーディング、ディレクションについて解説しているブログ
問い合わせて、ご紹介したり、添削記事を投稿しても良いかを聞いたら、快くOKしてくださいました。感謝です。
実際のWebディレクターさんが、現場でつくっているワイヤーフレームをイメージして制作されたそう。
実務をイメージしながら制作ができますね!
いきなり手を動かさない
まずは渡されたワイヤーフレームを見る。見まくる。
ワイヤーフレームから「なぜつくるのか」を考えます。
ワイヤーにはお問い合わせのためと書いているが本当にそれだけなのか、どういうことが他にあったほうがいいのか。
どういう用途で使われるだろうか(Web広告からの流入なのか、チラシなのか…)
ターゲットはどういう人なのか、競合はどういう打ち出しにしているのか?
というような、ワイヤーに書かれていることの深堀りとmogaBlog さんに書かれていることを読み込んで
やってみてください。
ここで、スケジュールも決めておきましょう。
自分が何をどのくらいでできるのかを把握できることと
もしフィードバックをもらうのであれば、そのフィードバック分の時間も考えてスケジュールを組みましょう。
実際の業務でも、公開日は決まっているのに、クライアントさんからの返しが遅い…
(しかも公開日は動かせない)というなんとも悲しいことがあるので、
そこのスケジュールをハンドリングする力も、大事になってきます。
未経験から制作会社に入ってきつかったこと
余談で、私が制作会社に未経験から入っていちばんきつかったことは
デザインの引き出しがすくないことでも、技術が追いつかないことでもないです。(いやこれもきつかったけど。笑)
「他業種のことを知らないこと。そしてそれを考え抜けないこと」
時間もかかるし、無知だし…
本当にここが大変でした。相手はこちらのことを「自分たちの事もよく知ってて、なおかつホームページに超詳しい」と思っているので、そこに応えるのが大変でした。調べたり考えたり…
最初からそういう事を教えてくれた会社にはとっても感謝しています。(やめちゃったけど)
ロゴをつくってみよう
ワイヤーフレームを深堀りしたら、ロゴをつくってみましょう!
深堀りしていることが不安なら、MENTAなどのサービスで見てもらうも良し、
私でも良いです。時間があったら…
そして、ロゴをつくってみましょう!
以前自分のロゴを作ったときのことを参考にしてもいいかもです。

デザインしてみよう
こちらもワイヤーフレームを深堀りして、ターゲットを決めたり、競合を考えたりしながら、
デザインをつくっていきましょう。
大事なのは、ターゲットがどういう気持ちになってほしいのかを考えること、
そして、どうデザインしたのかをきちんと言葉で言えることです。
先日本を読んだのですが、ビジュアルで見せるのではなく、
文章メインで論理的にデザインの基礎を教えてくれてます。
ターゲットに、どういう気持ちになってほしいのかを論理的に説明できるように
デザインを言語化した書籍を何冊か読むのはいい勉強になると思いました!
![]() | これならわかる! 人を動かすデザイン22の法則 [ ウジ トモコ ] 価格:1,650円 |

という感じでデザインしていきましょう。
考えを深堀りするときと同じように、
出来上がったら、MENTAなどのサービスで見てもらうも良し、
私でも良いです。時間があったらですが…
素材は無料で使用のものか購入する
写真素材を使うことになると思いますが、ポートフォリオで公開するのであれば、
無料で使用OKのものか、きちんと購入してください。
透かし(ウォーターマーク)が入ったまま使用するのは著作権NGです。
また参考を参考にしすぎるのもいけません。気をつけてください。
先日よんだ本で、勉強になったので紹介します。
![]() | 価格:1,760円 |

Webデザイナーやクリエイティブの仕事をする上で、切っても切れない著作権問題。
きちんと勉強しておいて(将来フリーになりたい!ならなおさら)損はありません。
制作することは誰でもできる
制作すること自体は誰にでも出来ると思っていて、「会社の方が成長する」と言われているのは
適切なフィードバックがあるかないかだと思っています。
なので誰かにきちんと本音でフィードバックしてもらうことを忘れずに。
まとめ
さらっと書きましたが、たぶん今までの中で一番することが多いワークだと思います。
各項目で注意点も書きましたので、ぜひ色々考えて、制作してみてください。
ちなみに、ポートフォリオのイメージも膨らませながら(何を入れるのか…等)、制作していくと
尚いいと思います。
次回はこのコーディングをしてみよう!と
番外編として、勉強を見ていた方の制作とフィードバックの流れ、
実際に出来上がったものを紹介できたらと思います。