【プログラミング5ヶ月目】ど素人がWEBデザインに初挑戦しました!

こんにちは。

元銀行員エンジニアブロガーのきたしょー(@KitamuraShohei)です。

 

プログラミング5ヶ月目の成果報告です!

 

〜プログラミング5ヶ月目の成果〜

  • 収益:0円
  • 新規案件受注:0
  • 勉強時間:196時間

 

プログラミング5ヶ月目は4ヶ月目に受注した案件にひたすら取り組む1ヶ月となりました。

主にWordPress案件のデザインカンプ制作を行ったのですが、デザインど素人のぼくには想像を絶するほど難しいものでした

【プログラミング4ヶ月目】案件受注額が55万円を突破しました!

2019-06-14

 

本記事では、プログラミング5ヶ月目を振り返ります。

プログラミング5ヶ月目はWebデザインにひたすら取り組みました

5ヶ月目は4ヶ月目に受注していたWordPress案件のデザイン制作に追われる1ヶ月となりました。

デザインど素人のぼくは「デザインくらい楽勝だろ〜!へっへ〜い!」と思ってたのですが、普通に甘かった・・・。

 

いざやってみると分かるんですが、Webデザインってめちゃくちゃ難しいんですよね!!!

 

顧客のニーズを元に作るラフデザイン案やメインカラーの選定など分からないことだらけでした。

 

さすがに自分一人では見栄えの良いデザインを作れないと判断したぼくは月額で雇えるデザイナー&コンサルすみれ(@su30mingle)さんにヘルプを要請。

彼女にラフデザイン案やデザインカンプ制作方法について指導をいただき、なんとか1ヶ月でデザインカンプまで仕上げることができました

〜ラフデザイン案・デザインカンプとは?〜
※ラフデザイン案とは「ラフなデザイン案」という意味で大まかな部分のみ記した素案
デザインカンプとは主に顧客に提示するデザイン案

 

いままでデザインは感覚でやるものだと思ってたのですが、大間違いでしたよ。

「近接・整列・反復・コントラスト」などの法則に基づいて制作することが重要。

決して感覚で作るものではありません。

 

逆に考えると、デザインど素人でもしっかりと基礎を勉強すればデザインスキルは身に付くものだと分かりました

これからはデザインの勉強もプログラミングと並行してやっていきます。

 

WordPress案件を受注してからデザインカンプ制作までの流れ

「じゃあ、実際にどうやってデザインカンプまで作ったの?」というわけですが、ぼくが案件を受注してからデザインカンプを完成させるまでの流れを解説しますね。

 

全体の流れはこんな感じです。

〜デザインカンプまでの流れ〜

  1. 概算見積もりを提出する
  2. 顧客のニーズをヒアリングする
  3. 全体のラフデザイン案(ワイヤーフレーム)を制作する
  4. ラフデザイン案に使用する原稿を作成して写真・画像・ロゴなどの素材を集める
  5. Photoshop(フォトショップ)などでデザインカンプを制作する
  6. 顧客にデザイン案(デザインカンプ)を提出して細かい修正を加える
  7. 顧客からデザイン案にOKが出たらコーディングを開始する

 

各項目の作業が完了したら、顧客に報告して「こんな感じでいいですか?」とこまめに確認を取るようにしてください。

では、それぞれ説明していきます。

 

1:概算見積もりを提出する

まず始めに「〇〇さん、WordPressできますか〜?」と案件の相談があったら、「WordPressだったら、〇〇万円くらいですよ〜」と概算見積もりを出します。

 

残念ながら、案件の相場については個人のスキルレベルや案件のボリュームによって変わるので、一概には言い切れません。

なので、参考程度にぼくの料金体系をお伝えします。

〜きたしょー料金表〜

  • LP(ランディングページ):5〜10万円
  • WordPress:15〜20万円
  • ECサイト:30万円〜

 

上記はデザイン抜きでの料金です。

デザイン込みになると作業量が爆上げするので、上記料金に+10万円以上は上乗せしないと正直作業量に対して報酬が見合わなくなります

実績作りのためにあえて安請け負いする戦法ならアリですが、あまりにも低価格で案件を請け負うのは精神的にも金銭的にも疲弊するのであまりオススメしません

 

ぼくは案件の相談があったら、「WordPressだったら〇〇万円くらいですね〜。ただし、ボリュームによって料金は変わるので、いろいろお話を聞かせていただいてから、再度正式見積もりを出させていただきます」と伝えてますよ。

 

2:顧客のニーズをヒアリングする

続いて、顧客がどのようなサイトを作りたいかをヒアリングします。

〜ヒアリングしておきたい事項〜

  1. サイト制作の目的:なぜサイトを作ろうと思ったの?
  2. ターゲット層:年齢、性別、地域、どんなときに利用する?
  3. サイトのテーマ・コンセプト:だれがどんな方法でどうなる?
  4. サイト制作後に期待する効果
  5. デザインの希望:使用するカラーや参考にしたいサイトなど
  6. サイトに必要な内容・情報・ページ
  7. 素材の確認:利用可能な素材(写真・画像・ロゴなど)はあるか?
  8. 納期の希望

 

実際にヒアリングしてみると分かるのですが、顧客は「カッコイイ感じが良い」とか「カワイイ感じが良い」と感覚的に要望を話すことが多いです。

もうね、この顧客の感覚的な要望をデザインとしてイメージ化するのがど素人にとっては激ムズでしたね

 

最初のヒアリング時に「カッコイイ感じが良い!」→「カッコイイとはどんな感じですか?」と顧客のニーズをより深掘りして聞いておくことが重要です。

 

3:全体のラフデザイン案(ワイヤーフレーム)を制作する

顧客のニーズをヒアリングしたら、紙とペンもしくはワイヤーフレーム制作ツールで全体のラフデザイン案を制作します。

ラフデザイン案と聞くと、完璧なものを作らないといけない気がしますが、ツールを使わずに手書きでザックリとしたレイアウトを作るだけでもOKです

〜ワイヤーフレームとは?〜
※ワイヤーフレームとはWebサイトのレイアウトを定める設計図のこと

 

ぼくはmoqupsというツールを使って全体のラフデザイン案を作りました。

顧客のニーズを元に参考にできそうなサイトを見つけて見よう見まねで作っていく感じですね。

 

今回WordPressでホームページを制作させていただいた高野塾(@japagod)さんにブログ掲載の了承はいただいてますので、よかったら参考程度にご覧になってください。

高野塾ラフデザイン案

※拡大してご覧になってください。PCの場合は左側にスクロールするとラフデザイン案が見えてきます

 

〜イケてるホームページが見つかるサイト〜

4:ラフデザイン案に使用する原稿を作成して写真・画像・ロゴなどの素材を集める

ラフデザイン案が完成したら、サイトで使用する原稿を作成したり、画像やロゴなどの素材を集めます。

ヒアリング事項にも載せましたが、原稿・写真・画像・ロゴなどの素材を顧客が用意するのか?それともこちらで用意するのか?は必ず事前に決めておくことが重要です

 

  • 原稿は準備いただけるのか?
  • 写真は撮ってもらえるのか?
  • 画像は有料素材を使うのか?無料素材を使うのか?
  • ロゴはWebデザイナーに依頼するのか?こちらで簡単に作るのか?

 

このあたりは事前に決めておかないと場合によっては正式見積もり後に追加費用が発生して揉める原因にもなりますからね。

 

原稿については、顧客が定めた原稿がない場合は顧客からヒアリングした内容を元に原稿を考えます。

ぼくの個人的な感想としては、顧客のニーズに合致する画像を無料素材サイトから探すのがかなり大変でした

トータルで10時間以上は無料画像をネットで探した覚えがあるので、もし可能であれば画像やロゴなどは顧客に用意してもらいたいところですね。

 

5:Photoshop(フォトショップ)などでデザインカンプを制作する

サイトに使用する画像やロゴなどの素材が集まったら、PhotoshopなどのWebデザイン制作ツールでデザインカンプを作ります。

 

Webデザインで使用する有名なツールはPhotoshop、Illustrator、XD、Sketchなどがあります

正直、ぼくもどのツールを使えば良いのか分からなかったので、現役Webデザイナーさんに聞いたら、「PhotoshopかIllustratorのどちらかを使えば問題ない」とのこと。

 

ぼくは30日間フリートライアル版があるSketchを使ってみましたが、サクサク動いて初心者にも使いやすい仕様でした。

デザインカンプについては、カラーの選定とスマホ版レイアウトを作るのが難しかったです

スマホ版レイアウトはPC版レイアウトから配置が大幅に変わるので、7割型新しいデザインカンプを制作している気分でした

 

今回ホームページを制作させていただいた高野塾(@japagod)さんのデザインカンプもよかったら参考程度にご覧になってください。

高野塾デザインカンプ

※ぼくが自力で作ったデザインカンプとWebデザイナーすみれさんコンサル後のデザインカンプの2つを掲載しています

 

6:顧客にデザイン案(デザインカンプ)を提出して細かい修正を加える

デザイン案が完成したら顧客に提出して修正や削除する点がないか確認します。

「デザインカンプが完成した後は基本的に大幅な変更はできません」と念を押しておくことも大事です

特にコーディングが終わった箇所のデザインを大きく変更する場合はコーダー側としては大変な作業量となりますからね。

 

7:顧客からデザイン案にOKが出たらコーディングを開始する

ここまで来てようやくコーディング開始です。

ぼくは案件を受注してからデザインカンプを完成させるまで約1ヶ月かかりました

案件のボリュームにもよるのですが、デザイン込みのWeb制作案件の場合はコーディングのみの場合よりも納期を長めに取らないと想像以上に時間がかかるので注意が必要です。

 

こちらの記事でWEBサイト制作案件を受注してから納品するまでの流れを全てまとめてますので合わせて読んでみてください。

WEBサイト制作案件を受注して納品するまでの仕事の流れ【フリーランス&副業】

2019-10-14

フロントエンドエンジニアはWebデザインスキルもあれば単価アップが見込める

今回、ぼくがデザインをやってみて感じたのは、フロントエンドエンジニアもWebデザインスキルを身に付けておいた方がいいってこと。

 

ぼくはWordPress案件を受注してからデザインカンプを制作するまでに約1ヶ月かかりました。

これまでに説明したデザイン工程をWebデザイナーに依頼すれば、それなりの外注費用が発生します。

となると、見た目の売上は上がるけど、最後に残る利益が少なくなってしまいますよね

 

フロントエンドエンジニアを目指すなら、単価を上げるためにWebデザインスキルも身に付けておいた方がいいと思います

 

最近はコーディング不要でホームページが作れるサイトも登場してきてるので、これからはフロントエンドエンジニアの業務領域にWebデザイナーが入り混んで来ることが予想されます。

将来を見越してフロントエンドエンジニアがWebデザインを学んでおくのは自然淘汰されないためにも必要なのかなと感じています。

 

プログラミング5ヶ月目:勉強方法はデザインカンプ制作・参考書3冊

プログラミング5ヶ月目はスキルアップのために以下の勉強をしました。

〜プログラミング5ヶ月目の勉強方法〜

  • WordPress案件のデザインカンプ制作
  • 参考書:Webデザイン・SQL・ソフトウェア開発の流れ

 

勉強方法①:デザインカンプ制作

上記の通り、デザインカンプを実際に作りながらデザインについても学びました。

勉強する際に利用したサイトなどはすでに紹介してますので、ぜひこの機会にブックマークして熟読してみてください。

 

勉強方法②:ノンデザイナーズ・デザインブック

こちらはデザインの基礎を学ぶために読みました。

デザインの基本原則や様々なフォントについて解説されており、「デザインの概要が知りたい!」という方におすすめの一冊です

英文を日本語訳した本なのでたまに変な表現の日本語がありましたが、勉強するうえで特に問題にはならないかと思います。

 

勉強方法③:スッキリわかるSQL入門

別案件でログイン機能や決済機能付きのECサイトを作る予定でいまのうちにSQLを学んでおく必要があるので、こちらの本を読みました。

SQLとはデータベース言語の1つでMySQL、PostgreSQL、SQLite、Oracle DBなど様々な種類があります。

こちらの本は特定のデータベース言語ではなくSQLやデータベースの仕組みについて学べるので、一番最初に読んでおく本としてはおすすめできる一冊です

〜SQL・データベースとは?〜
※SQLとはリレーショナルデータベースに蓄積したデータを操作したり定義するためのプログラム言語
データベースとは検索や蓄積が容易にできるよう整理された情報の集まり。

 

勉強方法④:ずっと受けたかったソフトウェアエンジニアリングの新人研修

実際に会社に勤めるエンジニアはどうやって開発を行っているのか知るためにこちらの本を読みました。

ウォータフォール型開発・アジャイル型開発などの開発プロセスや要求定義・要件定義の作り方など未経験者にも分かりやすい文章で書かれていました

これからエンジニアとして就職・転職を目指している方は必読の一冊ですね。

 

プログラミング6ヶ月目は収益200,000円を目指します!

ぼくのプログラミング5ヶ月目の振り返りが少しでもあなたのお役に立てたなら大変嬉しいです。

6ヶ月目は受注した案件に取り組みつつ友人のフリーランスエンジニアやWeb制作会社に営業して新規案件の発掘にも注力していきます。

収益は目指せ200,000円です!

 

引き続き、プログラミング頑張っていきます!!!

 

プログラミング6ヶ月目の成果報告記事はこちらです。

【プログラミング6ヶ月目】WordPress案件を納品しました!

2019-08-16

 

  • プログラミングに関する人気記事

プログラミング未経験者が月収100万円稼ぐまでの過程を実況する!

2019-02-06

プログラミング完全初心者が月15万円稼ぐまでの過程を大公開!

2019-09-21

【無料体験あり】おすすめプログラミングスクール5選【業界人が厳選】

2019-02-24

ABOUTこの記事をかいた人

元銀行員Webエンジニアブロガー。月間2.3万人に読まれる当ブログ《きたらいふ》を運営している29歳。当ブログのメインジャンルは「プログラミング・働き方・お金」の3つで「ぼくがあなたの背中を押します」をテーマに運営中。これからの人生についてハゲるほど悩んだ挙句、愛車ハリアーを売って丸5年勤めた銀行を辞めました。Web制作のお仕事絶賛大募集中!!!