こんにちは。
元銀行員エンジニアのきたしょー（@KitamuraShohei）です。
プログラミング５ヶ月目の成果報告です！
- 収益：0円
- 新規案件受注：0件
- 勉強時間：196時間
プログラミング５ヶ月目は４ヶ月目に受注した案件にWEBデザインに注力する１ヶ月となりました。
主にWordPress案件のデザインカンプ制作を行ったのですが、デザインど素人のぼくには想像を絶するほど難しいものでした。
【プログラミング４ヶ月目】案件受注額が55万円を突破しました！
本記事では、プログラミング５ヶ月目を振り返ります。
▼総制作費100万円超【豪華10大特典】プレゼント▼
プログラミング５ヶ月目はWEBデザインに大苦戦した１ヶ月でした
５ヶ月目は４ヶ月目に受注したWordPress案件のデザイン制作に専念する１ヶ月となりました。
デザインど素人のぼくは「デザインくらい楽勝だろ〜！へっへ〜い！」と思ってたのですが、普通に甘かった…。
WEBデザインってめちゃくちゃ難しいんですよ！！！
お客様のニーズを元に作るラフデザイン案やカラーの選び方など分からないことだらけでしたよ。
さすがに自分一人では見栄えの良いデザインは作れないと判断したぼくはデザイン歴10年超のすみれ（@su30mingle）さんにヘルプを要請。
彼女にワイヤーフレームやデザインカンプ制作方法についてご指導してもらい、なんとか１ヶ月でデザインカンプまで仕上げることができました。
ラフデザイン案・デザインカンプとは？
※ラフデザイン案とは「ラフなデザイン案」という意味で大まかな部分のみ記した素案。
※デザインカンプとは主にお客様に提示するデザイン案。
これまでデザインは感覚でやるものだと思ってたのですが、甚だ勘違いでした。
デザインには「近接・整列・反復・コントラスト」などの法則があるので、基本に忠実に制作することが大事。
決して感覚で作るものではありません。
逆に考えると、デザインど素人でもしっかりと基礎を勉強すればデザインスキルは身に付くものだと分かりました。
これからはデザインの勉強もプログラミングと並行してやっていきます。
WordPress案件を受注してからデザインカンプ制作までの流れ
「じゃあ、実際にどうやってデザインカンプまで作ったの？」というわけですが、ぼくが案件を受注してからデザインカンプを完成させるまでの流れを解説しますね。
全体の流れはこんな感じです。
- 概算見積もりを提出する
- お客様のニーズをヒアリングする
- ワイヤーフレーム（ラフデザイン案）を制作する
- ワイヤーフレームに使用する原稿を作成して写真・画像・ロゴなどの素材を集める
- PhotoshopやIllustratorでデザインカンプを制作する
- お客様にデザインカンプ（デザイン案）を提出して細かい修正を加える
- お客様からデザインカンプにOKが出たらコーディングを開始する
各項目の作業が完了したら、お客様に報告して「こんな感じでいいですか？」とこまめに確認を取るようにしてください。
では、それぞれ説明していきます。
１：概算見積もりを提出する
まず始めにお客様から「〇〇さん、WordPressでサイト作れますか？」と案件の相談があったら、「WordPressだったら、〇〇万円くらいですよ〜」と概算見積もりを出します。
案件の相場については個人の保有スキルや案件ボリュームによって変わるので、一概には言い切れません。
参考程度にぼくの料金体系をお伝えしますね。
- LP（ランディングページ）：10万円〜
- 静的サイト（複数ページ）：15万円〜
- WordPress：20万円〜
上記はデザイン抜きでの料金です。
デザイン込みになると作業量が爆上げするので、上記料金に+10万円以上は上乗せします。
でないと、作業量に対して報酬が見合わなくなります。
制作実績作りのためにあえて安請け負いする戦法ならアリですが、あまりにも低価格で案件を請け負うのは精神的にも金銭的にも疲弊するのであまりおすすめしません。
話を戻すと、ぼくは案件の相談があったら、「WordPressだったら〇〇万円くらいですね。ただ、ボリュームによって料金は変わるので、まずは話を聞かせていただいてから、再度正式見積もりを出させていただきます」と伝えてます。
２：お客様のニーズをヒアリングする
続いて、お客様がどのようなサイトを作りたいかをヒアリングします。
ヒアリングしておきたい事項
- サイト制作の目的：なぜサイトを作ろうと思ったの？
- ターゲット層：年齢、性別、地域、どんなときに利用する？
- サイトのテーマ・コンセプト：だれがどんな方法でどうなる？
- サイト制作後に期待する効果
- デザインの希望：使用するカラーや参考にしたいサイトなど
- サイトに必要な内容・情報・ページ
- 素材の確認：利用可能な素材（写真・画像・ロゴなど）はあるか？
- 納期の希望
実際にヒアリングすると分かりますが、お客様は「カッコイイ感じが良い」とか「カワイイ感じが良い」と感覚的に要望を伝えてくることが多いです。
もうね、このお客様の感覚的な要望をデザインとしてイメージ化するのがど素人にとっては激ムズでした。
最初のヒアリング時に「カッコイイ感じが良い！」→「カッコイイとはどんな感じですか？」とお客様のニーズをより深掘りして聞いておくことが重要です。
３：ワイヤーフレーム（ラフデザイン案）を制作する
お客様のニーズをヒアリングしたら、紙とペンもしくは制作ツールでワイヤーフレームを制作します。
ワイヤーフレームと聞くと、完璧なものを作らないといけない気がしますが、ツールを使わずに手書きでザックリとしたレイアウトを作るだけでもOK。
ワイヤーフレームとは？
※ワイヤーフレームとはWebサイトのレイアウトを定める設計図のこと。
ぼくはmoqupsというツールを使って全体のワイヤーフレームを作りました。
お客様のニーズを元に参考にできそうなサイトを見つけて見よう見まねで作っていく感じですね。
プログラミング５〜６ヶ月目でサイト制作させていただいた高野塾（@japagod）様よりブログに制作実績としてホームページを掲載する了承を得ましたので、ぜひ参考にしてみてください。
イケてるホームページが見つかるサイト
４：サイトに使用する原稿を作成して写真・画像・ロゴなどの素材を集める
ワイヤーフレームが完成したら、サイトで使用する原稿を作成したり、画像やロゴなどの素材を集めます。
ヒアリング事項にも載せましたが、「だれが原稿・写真・画像・ロゴなどの素材を用意するのか？」は必ず事前に決めておいてください。
- 原稿はお客様が準備する？ or 自分で考える？
- 写真はお客様が撮る？ or カメラマンに依頼する？
- 画像は有料素材を使う？ or 無料素材を使う？
- ロゴはデザイナーに依頼する？ or 自分で作る？
このあたりは事前に決めておかないと場合によっては正式見積もり後に追加費用が発生して揉める原因にもなります。
原稿については、お客様が定めた原稿がない場合はお客様からヒアリングした内容を元に原稿を考えます。
ぼくの個人的な感想としては、お客様のニーズに合致する画像を無料素材サイトから探すのがめちゃくちゃ大変でした。
トータルで10時間以上は無料画像をネットで探した覚えがあるので、もし可能であれば画像やロゴなどはお客様に用意してもらいたいところですね。
素材集めに使えるサイト
５：PhotoshopやIllustratorでデザインカンプを制作する
サイトに使用する画像やロゴなどの素材が集まったら、PhotoshopやIllustratorなどデザイン制作ツールでデザインカンプを作ります。
デザインで使用する有名なツールはPhotoshop、Illustrator、XD、Sketchなどがあります。
正直、ぼくもどのツールを使えば良いのか分からなかったので、現役WEBデザイナーさんに聞いたら、「PhotoshopかIllustratorのどちらかを使えば問題ない」とのこと。
今回、ぼくは30日間フリートライアル版があるSketchを使ってみましたが、サクサク動いて初心者にも使いやすい仕様でした。
デザインカンプについては、カラーの選定とスマホ版レイアウトを作るのが難しかったです。
スマホ版レイアウトはPC版レイアウトから配置が大幅に変わるので、７割型新しいデザインカンプを制作している気分でした。
最終的に出来上がったデザインカンプはこちらです。
６：お客様にデザインカンプ（デザイン案）を提出して細かい修正を加える
デザインカンプが完成したらお客様に提出して修正や削除する点がないか確認します。
「デザインカンプが完成した後は基本的に大幅な変更はできません」と念を押しておくことも大事です。
特にコーディングが終わった箇所のデザインを大きく変更する場合はコーダー側としては大変な作業量となりますからね。
７：お客様からデザインカンプにOKが出たらコーディングを開始する
ここまで来てようやくコーディング開始です。
ぼくは案件を受注してからデザインカンプを完成させるまで約１ヶ月かかりました。
案件のボリュームにもよりますが、デザイン込みのサイト制作の場合はコーディングのみの場合よりも納期を長めに取らないと想像以上に時間がかかるので注意が必要ですよ。
最終的に完成した高野塾様のホームページはこちらです。
【あわせて読みたい】WEB制作案件を受注してから納品するまでの全工程
WEBサイト制作案件の受注から納品までの流れ【フリーランス&副業向け】
フロントエンドエンジニアはデザインスキルもあれば単価アップが見込める
今回、ぼくがデザインをやってみて感じたのは、フロントエンドエンジニアもデザインスキルを身に付けておいた方がいいってこと。
ぼくはWordPress案件を受注してからデザインカンプを制作するまでに約１ヶ月かかりました。
これまでに説明したデザイン工程をデザイナーさんに依頼すれば、それなりの外注費用が発生します。
となると、見た目の売上は上がるけど、最後に残る利益が少なくなってしまいますよね。
フロントエンドエンジニアを目指すなら、単価を上げるためにデザインスキルも身に付けておいた方がいいですね。
最近はコーディング不要でホームページが作れるサイトも登場してきてるので、これからはフロントエンドエンジニアの業務領域にデザイナーが入り混んで来ることも予想されます。
将来を見越してフロントエンドエンジニアがデザインを学んでおくのは自然淘汰されないためにも必要なのかなと感じています。
プログラミング５ヶ月目：勉強方法はデザインカンプ制作・参考書３冊
プログラミング５ヶ月目はスキルアップのために以下の勉強をしました。
- WordPress案件のデザインカンプ制作
- 参考書：WEBデザイン・SQL・ソフトウェア開発の流れ
１：デザインカンプ制作
上記の通り、デザインカンプを実際に作りながらデザインについても学びました。
勉強する際に利用したサイトなどはすでに紹介してますので、ぜひこの機会にブックマークしておいてください。
２：ノンデザイナーズ・デザインブック
こちらはデザインの基礎を学ぶために読みました。
デザインの基本原則や様々なフォントについて解説されており、「デザインの概要が知りたい！」という方におすすめの一冊です。
英文を日本語訳した本なのでたまに変な表現の日本語がありましたが、勉強するうえで特に問題にはならなかったです。
３：スッキリわかるSQL入門
別案件でログイン機能や決済機能付きのECサイトを作る予定でいまのうちにSQLを学んでおく必要があるので、こちらの本を読みました。
SQLとはデータベース言語の１つでMySQL、PostgreSQL、SQLite、Oracle DBなど様々な種類があります。
こちらの本は特定のデータベース言語ではなくSQLやデータベースの仕組みについて学べるので、一番最初に読んでおく本としてはおすすめできる一冊です。
〜SQL・データベースとは？〜
※SQLとはリレーショナルデータベースに蓄積したデータを操作したり定義するためのプログラム言語。
※データベースとは検索や蓄積が容易にできるよう整理された情報の集まり。
４：ずっと受けたかったソフトウェアエンジニアリングの新人研修
実際に会社に勤めるエンジニアはどうやって開発を行っているのか知るためにこちらの本を読みました。
ウォータフォール型開発・アジャイル型開発などの開発プロセスや要求定義・要件定義の作り方など未経験者にも分かりやすい文章で書かれていました。
これからエンジニアとして就職・転職を目指している方は必読の一冊ですね。
プログラミング６ヶ月目は月収20万円を目指します！
ぼくのプログラミング５ヶ月目の振り返りが少しでもあなたのお役に立てたなら大変嬉しいです。
６ヶ月目は受注した案件に取り組みつつ友人のフリーランスエンジニアやWEB制作会社に営業して新規案件の発掘にも注力していきます。
目指せ月収20万円です！
引き続き、プログラミング頑張っていきます！！！
【あわせて読みたい】プログラミング６ヶ月目の成果報告
【プログラミング６ヶ月目】WordPress案件を納品しました！
プログラミングに関する人気記事
プログラミング未経験者が月収100万円稼ぐまでの過程を実況する！
プログラミング初心者が月15万円稼ぐまでの全ステップ【完全保存版】
本気でおすすめできるプログラミングスクール５選【現役エンジニア厳選】
▼総制作費100万円超【豪華10大特典】プレゼント▼