BLOG

今までの技術ブログをポートフォリオサイトとしてリニューアルしました。公開までの過程、このデザインにした理由など。

来年(2020年)に東京に移住するので、これを機会にブログをポートフォリオサイトとして全面リニューアルしました。
とはいえ記事数も少なく、PVもほぼない生まれたてホヤホヤのサイトでしたので、リニューアルというよりほぼ新規公開という感じになるかもしれません。まだ公開したばかりで最低限の要素しかないのですが、これから少しずつボリュームアップしていきたいと思っています。

リニューアルした理由

きっかけは冒頭にもあるとおり、来年の上京を機会にフリーでのWebサイト制作のお仕事を本格化させていきたいと考えていて、営業用ツールとして本格的にWebサイトを作る必要があったため。自分が何者でどんなものを作っているかを発信するプラットフォームづくりをしたいと考えていました。

発信するツールなんて本当のところはTwitterでもpinterestでも何でも構わないとは思いますが、Webサイト制作を生業としているので、イチからちゃんとサイトを作ることは発信の一つになるだろうと考えました。

作成当初はとてもカラフルだったデザイン

最初に作ってみたデザインの一部

これがPhotoshopで作成した一番最初のデザインです。ものすごくカラフルですね!w
グローバルメニューも日本語が使用されているし全体的に親しみがあるような、カジュアルな雰囲気にしていました。
しかも当初はコンテンツを全画面表示するプラグイン「Fullpage.js」を導入する前提で、すべてのコンテンツをファーストビューで収めようとしていました。

全画面表示のデザインの難しさ

けれど作成を進めていくうちに、ファーストビューで収めるデザインの、難易度の高さに負けました。。。
紙のデザインなど、制約のある中で成立するデザインはとても美しいものなのですが、常に更新する必要のあるWebサイトでは破綻しちゃうことが多いです。LPとか、決まりきったコンテンツを当てはめるような感じだとうまくいくんだと思います。

あとコーディングを進めていくうちに、Fullpage.jsのマウスコントロール(スクロール制御)に嫌気がさしちゃって
「やめる!Fullpage.jsやめるううう!」
という結論に至り、デザインを組み直しました。
Fullpage.js自体はとっても優秀なプラグインなので、そのうちサンプルでこのプラグインの動きを生かしたようなページを作れたらなと思います。

色が多すぎた

また全画面に広がるグリーンや赤の色味が、ひどく散らかって見えるようになりました。
特にポートフォリオサイトでは、一番見せたいのは制作物のハズ。上記のような広い範囲に単色をベタ塗りするとサイトそのものが目立ってしまい、肝心の実績が埋もれてしまいます。

一度デザインは完成させたのですが、必要のない色を削ぎ落とした結果、モノクロ+リンク色のピンクのみとなりました。ただちょっとさみしい感じもしたので、周囲にグレーの枠をもたせています。
まだトップページのコンテンツ間がだらしない感じがするので、今後少しデザインを見直すかもしれません。

WordPressの機能追加カスタム投稿で「制作実績」を追加

今回カスタム投稿を使って「ポートフォリオ」という投稿タイプを追加しました。またカスタムタクソノミーも追加し、ポートフォリオのカテゴリごとのアーカイブページも作りました。
ちなみにトップページの一覧画像はすべて同じサイズの正方形にトリミングしていますが、アーカイブページは縦横比を保持してPinterest風に並べています。レイアウトはmasonryというグリッドレイアウトライブラリを使用しています。
制作実績をサイズに拘らず俯瞰することができるので、どんな実績かが伝わりやすくなったと思います。

またカスタム投稿、カスタムフィールド、カスタムタクソノミーの良い練習になりました。今回はとてもシンプルな作りなので、これを元にもう少し複雑な投稿タイプを作れると良いな。(イベントカレンダー登録とか。)

まとめ:ポートフォリオサイトにとって大切なことは?を意識したサイト作り

そんな感じでまだまだ発展途上のサイトですが、ポートフォリオとして大切なことはなんだろう?という深い部分を考えた結果、ものすごくシンプルになりました。

なんとなく作ったものって、結局飽きが来て更新しなくなったりすぐに一新したくなったりするのですが、なるべく継続して更新していきたいので、とにかく「どうしたら飽きないデザインになるか」を意識しています。
今後はバグフィックスも含めて、このシンプルさを保ったまま気持ちのよいデザインになるように調整していく予定です。