作品詳細_Portfolio - Creator Mako's ポートフォリオ - 3時のおやつが食べたい

Creator Mako's Portfolio / Website

Portfolio モックアップ画像

制作期間

約2か月半

担当部分

設計 / デザイン / コーディング / WordPressオリジナルテーマ化

使用ツール

Visual Studio Code (コーディング)
Photoshop (デザイン)

レスポンシブ対応

パソコン / スマホ / タブレット

デザインコンセプト

大好きなスイーツをテーマにした自身のポートフォリオサイトです。
こちらのサイトは、HTMLで静的コーディングを作成してから、 WordPressのオリジナルテーマ化を行いました。
配色には、クリームとチョコを連想するオフホワイトとブラウン、 アクセントにターコイズブルーを使って、おしゃれで可愛い雰囲気にし、 ページタイトルやナビゲーションメニューのフォントはチョコペンで書いたような文字にしました。
サイト内で使用しているロゴやトップへ戻るボタン、装飾用イラストなども自身でデザインし、制作しました。
また、JavaScript (jQuery)を使って、スマホ時のハンバーガーメニューやWorksページのタブ切り替えメニューなど、 使いやすくなる機能の実装も行いました。
加えて、レスポンシブに対応しており、どのデバイスからでも見やすい設計になっています。

Portfolio トップスクリーンショット画像


ヘッダーはクリームをイメージして制作しました。


サイトのサブタイトル「3時のおやつが食べたい」をロゴに表現しました。


ファーストビューは、真ん中にスイーツ(自身で撮影)を配置し、 その両サイドにフォークを配置することで、 今からスイーツを食べようとしているような構成にしました。
おしゃれさを出すために、背景はストライプにしました。


Worksでは、スライドショーにして、なるべく多くの作品を見てもらえるようにしました。
その際、停止時間を入れることで、少しの間止まって作品を見れるようにしました。
また、パソコンとスマホのモックアップにすることで、 レスポンシブに対応していることが分かるようにしました。
加えて、スライダーそれぞれで流れる方向を変え、少し遊び心を入れました。


Aboutには、簡単な自己紹介文と、オリジナルの手書きイラストを入れました。
食べることが好きなので、 ずーっとむっしゃむっしゃドーナツを食べているイラストを描きました。


Contact部分には、ポートフォリオサイトを見てくださった方へのお礼文と、 お問い合わせフォームへの誘導ボタンを設置しました。


トップへ戻るボタンには、オリジナルのショートケーキのイラストを入れました。


フッターはチョコクリームをイメージして制作しました。

トップへ戻るボタン画像