ちょうど1年前、全く知識ゼロから1ヶ月間でLPサイトを制作しました。

1年経った今、初心に返るべく、当初の記憶を思い起こしながら書いています。

mito

これから初めてLP制作をする方へ、LP制作の完成までの流れや思考の参考になれば嬉しいです！

LP制作のスケジュール

LPサイト制作にかけた期間は約1ヶ月ちょっとです。

mito

過去、お仕事で受注した際、最短2週間で完成させたこともあります。
ただ、後述している担当範囲でプランニングからということであれば平均して1ヶ月くらいはかかります。

momo

だいたい実案件と同じくらいの制作期間だね！

私は一度、完全に独学で勉強しようとして挫折した経験があるので、Webサイト制作の一連の流れを効率よく学ぶためにシーライクスというスクールで2ヶ月間学びました。

mito

最初から独学ではなく、全く未知の分野に関して「全体像を把握する」「興味のキーワードを見つける」という意味でスクールを短期で活用し、その後独学で勉強するやり方、おすすめです！

momo

実際やってみて完全に独学だと、勉強を仕事につなげるための学ぶべき優先順位が見えずらい、視野が広がらないということがあるかなと思うよ〜！

仕事に繋げる！！Webデザインを独学で勉強し続けるためのマイルール10個こんにちは。mito（@mito_works）です。 独学でもそうでなくても物事を継続させようとすると、気分が沈んだり、逆に上がり...

LP制作の担当範囲

担当範囲としては、クライアントさんの中で作りたいイメージの構想がある状態からスタート。イメージを言語化して整理する部分から一緒に行いました。

ざっと以下のような項目です。

こんな感じでした。

ここからは、LP制作の一つ一つの流れを書きます。

LP制作のプランニング

講義で配られたプランニングシートを元に考えました。

特にターゲットのところは絞ったほうが良いということを教わりました。

momo

XXくんへのラブレターの方がXXくんとYYくんへとか、みんなへよりもちゃんと相手に伝わるよね！

mito

ターゲットを決めるときは、より明確にするため、ペルソナを設定して、年齢、職業、趣味、好みなど細かくより具体的に設定しました。

③設計 サイトに載せる内容

mito

いきなりコンセプトやサービス名を決められた訳ではなく、③設計をする中で、コンセプトが明確になりました。

具体的には、以下のように載せたい内容をポストイットに書き出して、分類分けしました。
その分類分けしたグループにタイトルをつけると3つあったので、冷え解消を3つの切り口で解消できることを伝えて「冷え性」という課題を解決できる商品として見せようと思いました。

LP制作のワイヤーフレーム設計

デザインはまだか！とムズムズしているかもしれませんが、手戻りを少なくするために、デザインの前段階の準備がとても重要です。

momo

まずそもそもワイヤーフレームの設計をなぜやるか？の理由は3つあるよ！

mito

今回はまず手書きで書いた後に、Justinmindというフリーのツールを使いました。

ワイヤーフレーム制作事例↓

mito

ツール自体は感覚的に操作できて使いやすかったです。

ここまででは、実際に画像を入れてみないとイメージがつかないなという感じで、まだまだ完成形のイメージがわいていない状態でした。

ワイヤーフレーム制作ツールのFigmaやAdobeXDもおすすめ！

当時は使わなかったのですが、ワイヤーフレームを書くツールとして、感覚的に操作できるFigmaやAdobeXDもおすすめです。

momo

どちらも無料で利用できるよ！

LP制作のデザインカンプ作成

いよいよワイヤーフレームからデザイン制作へ。

配色について、ベースカラー、メインカラー、アクセントカラー決めで少し悩みました。

mito

綺麗めでシンプルな大人向けのサイトをイメージしていたので、白、グレイ、アクセントカラーどうしよう？。。となりましたが、画像の色数もあるので実際に画像を配置して、アクセントカラーを決めることにしました。

以下、デザインのBefore→Afterです。

mito

初回は、今見ると公開できるようなものでもなく・・ちょっと恥ずかしいですが（汗）、はじめてということで大目に見ていただければと。

mito

修正を重ねていく中で特に、フォントの設定、余白の取り方、素材の選定と配置は本当に大事で、迷ったら、サイトの目的やコンセプトに立ち戻り、ちゃんと要件を満たしているか確認することがポイントだなと思いました。

LP制作のコーディング

いざコーディング！！

こちらもまず紙にコーディングの仕様書（というほどではないのですが、divやclassの設計を書きました）を作成。

progateも平行して活用して、書き方を覚えながら実践しました。

mito

コーディングのことを考えながらデザインをした訳ではないので、「これ、どうやって実現すれば良いのか・・」と苦戦。。。

デザインの段階でコードのイメージをもつことに尽きると思いますが、特にデザインの段階で意識しておいた方が良いことをまとめます。

mito

デザインカンプにほぼそった内容でコーディングが完了。でも何だかちょっと物足りない・・。文字が多すぎるかな・・。と先生にレビューしていただきました。

momo

「動きを入れると、玄人感でる！」ということで、早速jQueryで動きを入れることにしました。

mito

Featureの部分は特に文字が多く、よほど興味がある人以外は読み飛ばしてしまうところかなと思い、横からスライドで現れる動きを入れることで一旦は必ず目に入るようにしました。

LP制作のローカル環境でのテスト

テスト仕様書を作成。自分の用意できる環境の範囲でテストを実施。

mito

余白の取り方、ボタンホバー時の動きなど細かい部分をチェックし、修正。完成度を高めます。

LP制作の本番公開

いよいよ、本番公開！！！

今回は、既存のWordPressのサイトからアクセスできるような導線にすることが必要だったので、既存のサイトの下層ページとして追加。

詳細はこちらにまとめています↓

WordPressと静的HTMLを共存させる方法こんにちは。mito（@mito_works）です。 本家のサイトはwordpress。本家サイトのLPを作った場合にURLをWo...

LP制作の本番環境でのテスト

ローカルと同じテスト項目＋本番環境独自の項目（既存ページからの遷移、URL確認など）をテスト。

無事、公開となりました！

遷移元↓

今回作ったページ↓

おわりに

このLP制作をきっかけにデザインの独学勉強をはじめました！

mito

「デザインツールを使いこなしたい」というところからバナートレースへ

バナートレースからデザイントレースへ。50個トレースしてわかったこと＆Tipsこんにちは、mito（@mito_works）です！ すきま時間に続けていたバナートレースも気づけば50個になりました。 （途中...

mito

「意識的に良いと思うサイトや参考にしたいと思うサイトのストックを増やしたい」というところから#1日1サイトレビューへ

3ヶ月続けた1日1サイトレビュー、3つの学びとやってよかったことまとめこんにちは。mito（@mito_works）です。 今回は3ヶ月間毎日twitterに投稿を続けていた1日1サイトレビューの総集...

mito

「コーディングスキルを磨きたい」というところから#30DAYSトライアルへ

【30DAYSトライアル3rd】学びの総集編 今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。 30DAYSトライアルは、...

be continue…。

コーディングのスキルアップのために挑戦している#30DAYSトライアルの記録、4つ目の投稿です。

【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】DAY11,DAY12『Bootstrapの基礎』こんにちは。mito（@mito_works）です。 今回はコーディングのスキルアップのために挑戦している#30DAYSトライアル...

【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】DAY13,DAY.14『Bootstrapを使ってビジネスLP制作』こんにちは。mito（@mito_works）です。 今回はコーディングのスキルアップのために挑戦している#30DAYSトライアル...

【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】DAY15,DAY16『Bootstrapを使ってビジネスLP制作②』こんにちは。mito（@mito_works）です。 今回はコーディングのスキルアップのために挑戦している#30DAYSトライアル...

今回はポートフォリオの作成。

mitoさんのポートフォリオ完成度高ェ…
アニーさん（@Annielovescode ）の時もそうだったけど、デザイナーさんがコーディング覚えると威力ハンパないですねw

「ポートフォリオサイトを作れるようになる」がゴールでもいいから、そこまでやると世界変わると思うなー。#30DAYSトライアル https://t.co/C5PG5YbFBI

— ショーヘー@Webエンジニア (@showheyohtaki) September 3, 2019

#30DAYSトライアルのコンテンツを作成した、@showheyohtaki さんからこんな嬉しいリツイートを頂き、コーディング以外のポートフォリオのコンセプトの作り方やデザインの考え方の手順をまとめたくなりましたw。

mito

私自身、作ろう作ろうと思ってはいたけれど、時間がかかりそうでなかなか着手できなかったので、進め方はすごく工夫しました！

コーディング初心者のみならず、時間がなくてポートフォリオの作成になかなか取り組めていない方、サクッと作りたい方にオススメな記事です。

momo

完璧は目指さない。まずは公開することを目標に。公開してからブラッシュアップしていくことを前提に作ったよ！

DAY18~20.『ポートフォリオサイトを作る』

こちらのDAY18~20を2日でやりました。

 DAY18~20. ポートフォリオサイトを作る

ポートフォリオ作成の意図を明確にする

そもそも何のために作るのか？
まずはじめに、迷った時に立ち戻れる場所を作るために3つのことを明確にしました。

mito

この状態だと、まだふんわりしているのでさらに掘り下げていきます。

掲載の情報を洗い出し、掲載順序を決める

何を載せるか？を考える時に、誰に向けて作るものなのか？(ターゲット)を具体的に考えました。

どんな人が見るのか想像する

駆け出しのWebデザイナー。今の段階で、ポートフォリオを公開したからといっていきなり全く知らない人から連絡がきてお仕事につながるというのは考えずらいです。

知り合いに「Webデザインの仕事始めたんだよ、もし必要だったら声かけてね〜。ちなみにこんなの作ってるよ」と直接URLを共有するか、知り合いが私を紹介する時に見せる参考URLのイメージ。
なので、あくまで知り合いの範囲。

私のことを少し知ってはいるけれど、詳しくは知らない。
何かしら仕事があって、この人（私）に依頼できるかどうか判断したいという時に使われるのではと想像しました。

掲載情報に優先順位をつける

自分が仕事を依頼する場合の思考回路を参考に、「依頼できるかどうかの判断」を分解し、以下4つに分けました。

mito

上から順に重要なものを並べているのでこの順番に載せています。

掲載情報の文章を考える

デザインの前に文章をあらかじめ考えておきました。
文章を考え、編集する作業は案外時間がかかります。

mito

掲載するものしないもの、どこまで詳しく書くのか？を明確にして進めました。

デザインを考える

次はデザインを考えます。

コンセプトとなるキーワードを洗い出す

掲載情報の洗い出しで考えたターゲット（どんな人が見るのか？）から考えると、男女や年齢、職業など外側ではなく、内側の部分が大事だと思いキーワードを洗い出しました。

スマート（コンセプトづくりやブランディングをしっかりする）
だけでなく、遊び心があり、素敵だな、いいなと思うときめきや楽しさがある。

と考えました。

キーワードを色や文字や画像に変換する

色は楽しさやユニークさを感じさせる黄色。
それだけでなく、モヤモヤがパッとひらける、光が射すというイメージ。

スマートさを表現するにあたり、男女どちらかに寄らないように意識して、赤寄りのピンク。

この2色は意識的に使い、残りは遊び心とときめきをプラスする色を選びました。

自分の中でスマートさ、遊び心、ときめきのバランスがちょうどよくなるように、画像やアニメーションも選んでいます。

テンプレートを探す

なぜ2日で実装できるのか？
そうです、テンプレートを使っているからです。

今回はこちらを使いました。

Void – Onepage Parallax Personal Portfolio Templates

mito

今回初めて使ったのですが、楽をするというよりは、他人の書いた綺麗なソースを読むことで勉強になったり、実装の引き出しが増えます。

テンプレートを使ったから、瞬殺で完成するかと思いきや、コードの全体を理解する必要があるので、自分の思い通りに修正するのは難しかったです。

オススメのツール紹介

実績を見せる部分はこちらのモックアップイメージがオススメです。

mockup

参考にしたい色を画像から抽出するときはこのツールがオススメです。

iromiru

実装する&公開

こちらに沿って進めました。

1. HTMLテンプレートを使ってみよう＋自分のポートフォリオサイトを作ろう①
2. 自分のポートフォリオサイトを作ろう②
3. ポートフォリオを公開しよう

今後の課題〜修正したいところ〜

公開したものの、修正したい箇所は色々あります。

• 初回読み込みに時間がかかるのでサクッと読み込めるようにしたい
• モーダル表示画面の閉じるボタンがないのでつけたい
• 実績（特にWebデザイン）について外部リンクに飛ばしたり、目的や作業範囲の説明文を追加したい
• スマホにもアニメーションをつけたい
• PCとスマホで背景色が違うので統一したい
• 料金表のマージンをもう少し広げたい
• メニューの順序の不具合修正（ServicesとPrice）

mito

順次修正していきます！

まとめ

デザインはゼロから作るのではなく既存のものの組み合わせと言います。

アイデアのつくり方

posted with ヨメレバ

ジェームズ・ウェッブ・ヤング/今井茂雄 CCCメディアハウス 2012年06月

楽天ブックス

Amazon

Kindle

コーディングも同じく、全てゼロから作ろうと気負わなくていいのだということが一番大きな学びでした。

今回は、はじめてWebデザイナーとして作った名刺について、デザインをするときに考えたことをご紹介します。

mito

実際に作るよりも作る前の「どんな名刺にしようか？」と考えることに時間を多く使いました！

どんなシチュエーションで誰に配るものかを考える

名刺は、はじめましての方との会話のきっかけになるツールです。
インターネット上でお仕事の依頼から納品までできてしまう時代。
実際にお会いして「名刺を配る」という機会自体貴重なことの様に思いました。

mito

相手の印象に何かしら爪痕を残せる様な名刺を作りたい！という思いがスタート地点です。

私の場合は、「どんな状況で誰に配るものか？」を明確にするとデザインに落とし込みやすいなと思ったのでそこから考えました。

コンセプトを考える

名刺とは自分をわかりやすく伝えるツール。

mito

色々考えたのですが、強い個性や実績もまだないので、自分の“得意と好き”そこから“やりたいこと”を詰め込むことにしました。

mito

抽象的なコンセプトですが、ここから細かいデザインを考えました。

細かいデザインあれこれ

まず、色。
モヤモヤがパッとひらける瞬間。光が射すというイメージで黄色にしました。
そこにきちんと相手の悩みや課題を受け止めるという柔らかさを表現したかったので、優しめの黄色です。

mito

肩書きを流れるようなスクリプト体にして、遊び心と柔軟で大胆に発想できるイメージをつくりました。

サイズについて、名刺に載せる情報量も少ないので敢えて小さめサイズのCUBE（正方形）にしました。

mito

レイアウトについてはこんな本を参考にしました！

名刺＆小型カードのデザイン

posted with ヨメレバ

センドポインツ・パブリッシング グラフィック社 2018年03月

楽天ブックス

Amazon

Kindle

印刷所の選定

サンプルを取り寄せ、色味や素材感が気に入ったのでこちらにしました。

momo

whooはおたすけデータ修正有にして、イラストレーターで入稿すると足りない部分に色を足したりなどの修正を加えた上でPDFに変換してくれて初めての人にとってはとても安心だよ！

実際に入稿してみての所感としては、納品されるまでに少し時間がかかるので注意が必要です。(営業日で5日ほどです。)

実物をみての感想

名刺だけれど名刺っぽくない雰囲気、少し控えめなデザインでいいなと思いました。
色も想定通りです。

mito

配った時にどんな反応、どんな会話をするのか今からワクワクします！