京都のNPO法人 CRA(クリエイター育成協会)が発信するブログです。Web業界、Webデザイナー・Webプログラマー・Webマーケターの育成。

お問い合わせ
075-353-3711 受付時間:10:00〜18:00(土日・祝日除く)
menu close

CRAブログ- Web/IT・教育・福祉業界の情報を、スタッフ&インターン生が配信中

LPデザインで学んだこと

2015年06月05日志知
Pocket

こんにちは。金曜日ブログ担当の志知です。

6月とは思えないような、熱ーい日々が続いていますね。
晴天の中、京都タワーが空に映えている様は、とっても爽やかです。
京都の夏といえば祇園まつり。活気を帯びた街は、歩いているだけで楽しいですよ!
今から夏が待ち遠しいです♪

さて、今回は、インターンの中で制作させて頂いたLP(ランディングページ)
デザインについてお話したいと思います。

LP(ランディングページ)とは?

直訳すると・・・「着地するページ」。
ランディングページとは、リスティング広告を含む様々な広告やリンクからの飛び先となるページです。

構造でいうと、indexの次にtopページがあって、次にaboutがあり・・・と分岐している通常のページとは違い、
情報の載った一枚構造のページの中に、申し込みページへ飛べるボタンがあるだけのシンプルなもの。

http://lp-web.com/

こんなページも発見しました。
LPという言葉を知らない人も、一度は目にしたことがあるのではないでしょうか?

失敗しないホームページリニューアルセミナー

東京、京都会場それぞれ2回づつ、クリエイター育成協会・理事/東京マネージャーである高田さんがセミナーを行います。
今回は、そのLPデザインを担当させて頂く事になりました。

まずは高田さんから
・構造の参考にしてもらいたいwebページ
・最終的なサイトイメージに近いwebページ
を伺いました。

既存のwebページには、さまざまな制作におけるヒントがあり、
制作ビギナーの人にとっては大変参考になります。
これで、進めていく方向性が明確になりました。

まずはワイヤーフレーム制作から進めていきます。

ワイヤーフレームとは、「何を・どこに・どのように」が記載された「サイト設計図面」のことで、ページの装飾を始める前の指標となります。

私は一番得意であるillustratorで制作しました。
画像の配置、大きさなどもここで粗方決めてしまいます。

スクリーンショット(2015-06-04 16.36.21)

いよいよ本番!

次に、画像や装飾部分に手を入れて行きます。
ページが徐々に見やすく、すっきりしていく様子が、お分かり頂けますでしょうか?

①仮の画像をはめ込み、提案したもの。
スクリーンショット(2015-06-04 16.51.00)

②本番の画像をはめ込みました。一番目立たせたいボタンをオレンジに変えることで、目がいくように。
スクリーンショット(2015-06-04 16.48.10)

③背景の画像を薄くして、前面の文字に目がいくように。
スクリーンショット(2015-06-04 16.43.09)

更にここで、細かく修正すべき点をご指摘頂きました。

スクリーンショット(2015-06-04 17.06.07)

そして試行錯誤の末、最終的に出来上がったものが、こちらのページです。

http://cra.jp/lp/seminar_website_renewal/

ワイヤーフレームの状態から、できあがりの形にするまで、かなりの時間がかかってしまいました。

文字や色、ひとつひとつに対するこだわりと意味付け。
見やすいページを作るための工夫。
そして、webページ制作はアートではなく「デザイン」であるということ。

専門外の「商い」を補助する立場で、事業を学ばせてもらいながらデザインをさせて頂くという意識で進めること。

制作に集中し出すと忘れてしまいがちな最も大切なことを、改めて思い知らされた気がしました。

LPデザインを振り返って

今回のデザインを通して、「やり直すこと」の大切さを学びました。

通常のプロのスピードでは、これだけじっくりと一つのデザインをさせて頂けることはないでしょう。
気づかない部分をプロの方にご指摘頂くことで、ページのクオリティが少しづつアップしていくことを目の当たりにし、
奥深いデザインの世界を改めておもしろいと感じました。

同時に、インターン生に親身になって教えてくださる職員の方々に、深く感謝しました。

実際に就職する前に、ここにインターンに来て本当によかったと思います。
興味がおありの方は、是非一度、ご来社ください。お待ちしています♪

Pocket

CRAが運営する就労移行支援事業所 ワークサポートセンターはこちら