フリーランスのマークアップエンジニアとして活動して約1年半が経過。
作ったきり放置で微妙だったポートフォリオを先日、ついにリニューアルしました。
Web制作をしている身で色々と考えながら作ったので、完成までにどんな道のりを経て出来たのかをここに記しました。
これがベストなやり方というわけではありません。ひとつのやり方にすぎませんが、これからポートフォリオを作ろうかと思っている人はもちろん、すでにポートフォリオがある人も、なにか少しでも参考になれば幸いです。
経営戦略を考える
まずやったのは、サイトの構成を決めることでもデザインを考えることでもなく、経営戦略を考えることです。
ここでいう経営戦略は言葉の使い方が合っているのかは分かりませんが、フリーランスとしてスキルを売るにあたり、「誰にどうやってどんなスキル」を売るか、これを改めて考えてみました。
フリーランスに限らず、転職用にポートフォリオを作る方も考え方は同じですね。
ブランディングとマーケティング
どんな方法でもいいですが、私は紙とペンを用意して、以下をそれぞれ書き出しました。企業だったら、自社の商品や市場調査をすると思うのですが、フリーランスは自分自身が商品です。
ブランディング
自分が持っているスキル。どんなことが得意か。どんなものが売れるか。
マーケティング
誰にスキルを売るのか。どこに需要があるか。
やりたくないことも決める
仮にスキルがあっても、やりたくないことまでやる必要はありません。きっと、フリーランスになった（なる）からには、やりたい仕事を選びたいですよね。もちろん、私もそうです。
なので、やりたく無いことも紙に書き出しておきます。
やりたいことを明確にするためには「やりたくないこと」を明確にしなければならないんだ
非常識な成功法則 -神田昌典 著 –
このように以前に読んだ本の中でも綴られており、すごく納得しました。
書き出したらなんと20個以上も！ちょっとだけ例としてあげると
- 単価の低い、割りに合わない仕事はしない
- 身の丈に合わない営業活動をしない
- 満員電車には乗らない
- 信頼できない人とは仕事をしない
などなど。意外とやりたく無いことって、やりたいことより出てくるんですよ。
書いたことをまとめる
今までに書いたブランディングとマーケティング、そしてやりたくないことをあげることで、「誰にどうやってどんなスキル」を売るかが見えてくるはずです。
私がここで出した戦略は以下の通り
- 売る物：コーディング、WordPressのテーマ制作
- 誰に売るか：コーディングを手伝って欲しい同業者。知り合いからの紹介
- やらないこと：ディレクション、非IT企業からの直案件、Web上での集客
私は親しい人とだけ仕事をしたいので、知人や知人からの紹介のみでコーディングの下請けに専念。いわゆる営業トークや初対面の人との会話は苦手なので、Web集客は狙わず、面識ない人からの仕事は受けないに決めました。
これで方向性が決定です。
サイトの方向性を決める
戦略が決まったので、本題のサイト制作に着手。まずはどんなサイトにするか、方向性を決めます。Web制作の現場では、Webディレクターが最初にお客様とヒアリングする部分ですね。
上記で考えた、経営戦略を元に情報を整理していきます。
- サイトを作る目的
- 制作したことで実現したい目標
- サイトのペルソナ（メインターゲット）
- 集客方法
- コンテンツ（載せる情報）
私は以下のように、Googleドキュメントにまとめました。
サイト構成を決める
続いて、サイトの構成を決めます。
私はブログ（このサイト）の運営もしているので、ポートフォリオの下層にブログがくるようにし、ポートフォリオはシングルレイアウトで１ページで情報が完結するような構成にしました。
ざっとこんな感じです。かなりシンプル。このようにツリー構造で書くと整理されてわかりやすくなります。
ブログはWordPressですでに作っており、今回のポートフォリオ作成では触れないので、いったん置いておきます。
原稿を書く
続いて、サイトに掲載する情報を全て文章にしてまとめます。A4用紙に印刷された状態で人に渡しても、情報が伝わるレベルで書いていきます。
こんな感じでGoogleドキュメントにまとめました。
細かい文章や文法的なことはまた後で調整するのでざっとでも構いませんが、どんな情報を載せるのかはここで決まるので、伝えたいことは全て書きます。
ワイヤーフレームを作る
先ほど作った原稿を元に、サイトのワイヤーフレームフレームを作成。ここには写真を入れるとか、どうやって見せるかなど考えながら枠組みを作っていきます。
今回はシングルレイアウトにしたので、1枚で完結。
この後、デザインも自分でやるのでワイヤーはかなりざっくりです。この時点で、参考サイトやデザインを見ながら、どんなデザインにしようかも考えながらやっていました。
デザインをする
ワイヤーフレームを元にデザインしていきます。デザインは独学でかじったレベルなので、専門ではないですが、Pinterestなどで色んなデザインを参考にしつつ作りました。
今回のデザインのトンマナやイメージは以下の通り
- シンプル、綺麗、上品さ
- ロゴの色やプロフィール写真などを赤色をテーマにしているため、赤と相性のいい色合い
上記を踏まえ、こんな感じにデザインをしてみました。
デザインをする上で一番こだわったポイントとしては、「余計な操作をしなくても見れる」です。
特にスマホデザインでは主流となっている、ハンバーガーメニューやスライダーといった要素が隠れていて、ユーザーがタップやフリックなどをしないと見れないものは全て排除しました。
特にスライダーとか横にスクロールさせるものは、全ての人が操作して見てくれるとは限りません。なので、縦にスクロールするだけで、見せたい情報は全て表示されていて、できる限り目に入るようにしました。
コーディングをする
デザインができたので、いよいよコーディングです。
コーディング環境は、HTML、Sass、jQuery、Gulp。
CSS設計にはいつも仕事で使っているFLOCSSを導入。
実績の部分はCMS化をしたかったので、最近ちょっと気になっていたmicroCMSを今回初めて触って導入してみました。
WordPressだと、サイト全体をWordPress化しないとですが、microCMSはサイトの一部として入れられるので、とても便利。今回作ったポートフォリオのような規模感だと、microCMSがちょうどいいと思いました。
お問い合わせフォームにはgoogleフォームを使ったので、お手軽に実装。
実機確認
開発環境にアップして、最終チェックです。チェックは持っている検証用端末で全部やります。IEはもちろん、今回は対応していないので排除。
実機で見ることで崩れている部分に気づくとかあるので、すごく大事ですね。
公開
最終チェックが全て終わったら、本番環境にデプロイして完成！！！
おつかれさまでした。
