2018.09.08

asougi.me

asougi.meができるまで

asougi.meというポートフォリオサイトを作成しました。
デザインに込めた思いを綴って一つの作品紹介ページにしたいと思います。

ロゴ制作

ロゴ制作が一番むずかしかったです。

何故かというと実は私、絵(イラスト)が書けません。イメージキャラクターのクマくんかわいい!と言っていただけることが非常に多いのですが、実はこのクマくんOvalRectangleのみで作りました。

話が脱線しましたが、ロゴ案は全部で4つ。正式に決まったロゴ以外は言わずもがな某キャラクターをイメージしたものになります…。

ロゴ案とロゴ案2は完全にイメージしたものですね。ロゴ案3はサンリオをなんとなくイメージしてしまうと思ったのでボツに。サイトデザインに合わせ、シンプルだけどちょっと可愛い、ちょっと女性らしさを感じるをモットーに、細字のサンセリフ体フォントと筆記体フォントを組み合わせて今の形になりました。

ページデザイン
  • トップページ(表紙)
  • 自己紹介、スキル紹介ページ
  • 作品集ページ
  • ブログページ
  • 作品詳細・ブログ記事ページ
  • お問い合わせページページ

制作工程で一番楽しかったページデザイン。
洗い出したページをひとつひとつ作っていきます。レスポンシブデザインにするので、PCとSP両方のデザインを作成。

ちなみに私はPCデザインを作ったあとにSPデザインを作ります。今の時代、SPの方が主流になってきているので、逆の工程の方が良いと思いました。


実際に作ったSketchの全体図とシンボル一覧。
基本的にアイコン群はすべてSVGで書き出しました。ベクターデータはどのデバイスで見ても荒れないのでほんとうに助かります。

初期デザイン案はこちら

元々は黄色を基調とした暖色感あるサイトデザインにする予定でした。パン屋さんのようなガーランドをイメージしていたのですが、元々黄色は目に優しくないので、まぶしく感じるのと、もう少し遊び心が欲しかったので今の形となりました。

コーディング&WordPress

作ったデザイン案を元にマークアップとスタイル調整していきます。
私はまずWordPressを入れる前に静的ページとして作ります。その後、動的なphpタグを組み込んでいきました。

記事一覧ページのスタイルはflexboxを使って実装したのですが、等間隔の左寄せに悩ませられました。floatより便利ですが、まだまだ問題点はありそうです。

ポートフォリオサイトを作ってみて

今回のポートフォリオサイトを作ってみて思ったのは「自分はデザイン作業がすごく好きなんだ」と感じました。好きなことをお仕事としてできているのは最高ですし、趣味の延長みたいなものです。

頑張って作った分、SNSではたくさんの方に見て頂けてすごく嬉しいです。これからDailyUIといった自分の作品をどんどん作っていく予定ですので、お時間あるときは足を運んで頂けたら嬉しいです!

質問等ありましたら

質問箱、またはお問い合わせページにて受け付けておりますのでお気軽にどうぞ!

PAGETOP © asougi.me