はじめまして、Sayaka Osanai(@nanammeon)と申します。
普段はフリーランスで働いており、複数の事業会社にてWebサービスやアプリのUIデザイン設計/制作をしています。

今回、昨年公開したポートフォリオのリニューアルを行ったのですが、その際に込めた思いや制作風景をnoteでまとめられたらと思い記事にしてみました。

ポートフォリオ全貌

作成したポートフォリオはこちら。
ちなみにデザインはSketchで作成し、サイト実装はWordPressでやりました。

今回は1ページのみのペライチデザインにしたので、index.phpのみ変更です。お問い合わせフォームはContact Form7を使用しています。

遊び心を忘れずにデザインしてみたので実際にサイトに訪れて触ったり見て欲しいのですが、サイト全貌をスクリーンショットで収めてみたので共有です。

PC/SPで少しだけメインビューの部分のデザインを変えています。
横幅が広いPCには「制作実績/お問い合わせ」をいつでも遷移できるようにページ内リンクの導線としてボタンを追従させる形にしてみました。

全体デザインとしてフラットではあるけれど、押せる部分はしっかりと差別化をしたり、魅せる部分は幅広めにとったりと、「触る」「見る」に特化してデザイン設計しました。

ちなみに前回（公開時のデザイン）はこちら。

（全体スクリーンショットがなくて申し訳ない……）

課題① ロゴデザイン

前回のデザインも非常に自分の中ではうまく表現できた形になっていたのですが、課題点がひとつ。そう、一番大切な「サイトロゴ」です。作った当初はいい感じに出来たのでは…？と自負していたのですが、段々見慣れてくる内にやってくる違和感……。

わたしはWebサービスやアプリのUIデザインを最も得意としているので、ロゴ制作に至っては二の次スキルです。サンセリフとして表示している「1056」にカリグラフィー（筆記体）フォントの「asougi.me」があまりマッチしていない…とじわじわ思い始めます。文字の太さもちぐはぐしているし……。（どんどん出てくる過去の自分へのフィードバック）

SmartHRのロゴリニューアルの記事の中にあったロゴウェイトのお話。

文字の太さってすごく大事ですよね。
今後、ステッカーやちょっとしたグッズも作りたい（挑戦したい）と思っていたので、太さやサイズ、フォントを選定しながら凝らして作成したロゴがこちら。前回のロゴと比較してみました。

驚くほど変わりました…！
「1056」と「asougi.me」のウェイトを合わせて、拡大縮小しても自分のロゴであると判別できるようにリニューアル。自画自賛できるほど可愛く仕上がりました！大好きなクマと合わせられたのもポイント高いです。

（それにしてもロゴ制作って難しい……。お仕事として請けている方本当に尊敬します。サイトデザインよりもずっと時間をかけて作成しました。）

課題② 自分のできることの明確化

課題の2つめが自分ができることの項目の精査です。
以前は制作会社のWebプロダクトデザイナーとしてお仕事していたので、「できること、つかえるもの」としてスキルを推し出していました。

今回はフリーランスデザイナーとして自分の目指しているものを押し出そう！と思い、 「できるもの/つくれるもの」に変更。数が少なすぎても多すぎても良くないので、8種類に絞りました。

課題③ スマホデザイン

最後の課題がスマホデザイン。こちらは上記2つの課題に対しては解決度は低めのものでした。

今まで自分のデザイン制作はPCデザインを作成してからスマホデザインを作るという手順を踏んでいました。その際に起きるスマホで見た時の文字サイズや各要素の余白感や気になる違和感……。

昨今スマホから閲覧するユーザーが多くなることを考え、今回はスマホサイズのデザインから作成してみました。また、自分がiPhoneSEユーザーでもあるため、320pxサイズを考慮したデザインにしています。

スマホデザインを作った後にPCデザインを作った方がメリットありますね！幅が狭いサイズから作成しレスポンシブ化すれば、大きい画面でもコンテンツが伸びるため、崩れが発生しません。

以前、DISTでこちらのスライドを拝聴していたときになるほどと思いながら実践できていなかったので、今回からスマホ→PCデザインで制作しています。

最後に

課題を解決したデザインは「さわって楽しい、見てきもちいい」デザインとして100点をあげられるくらい可愛いものに仕上がりました！自分で毎日訪れたくなるくらい素敵なデザインになったと思います…！

ミッションである「さわって楽しい、見てきもちいい」、シンプルだけどちょっと可愛いデザインを目指してリニューアルしたポートフォリオサイト、ぜひ遊びに来てください！🙇‍♂️

ちょっとセルフ宣伝の形になってしまいますが…。
現在アプリ/サービスデザインからWebメディア/LPデザインまでWeb全般のデザインをちょこちょこお請けしております。デザインでお悩みのある方、ポートフォリオ見て気になった方いらっしゃったら、ぜひサイトのお問い合わせやTwitterのdmよりお気軽にお声がけください！

名刺もできました

印刷スキルは全くないので実は2,3度作り直しています……。凝らして作った名刺、実際にお会いした方ぜひ受け取ってください！🧸