logo image

MY PRODUCTS

制作期間:約4ヶ月

対応機種:デスクトップ/ラップトップ/タブレット/スマートフォン

担当範囲:企画/情報設計/ワイヤーフレーム/デザイン/コーディング

使用ツール:Illustrator/Photoshop/XD/JQuery/WordPress

Kaho Morita

自身のポートフォリオは、情報設計からデザイン、コーディングまですべて一貫して手がけました。これまで制作してきた作品を掲載するとともに、「私らしさ」をデザインで存分に表現できるよう心がけています。

Target

ポートフォリオをご覧になられている方々や、デザインを依頼して下さったクライアント様。

Purpose

私自身について知っていただくとともに、過去の実績をご覧いただくため。

emma tattooのmock up画像

CONTENTS DETAILS

TOP PAGE

top pageのmock up画像

メインビジュアルのあとに自己紹介(I'M K)、その下に作品集(MY PRODUCTS)を配置することで、まず私自身や得意なことを知っていただいた上で、実際の制作物をご覧いただける流れにしました。ページ下部には「CONTACT ME」セクションを設け、興味を持ってくださった方がすぐにご連絡いただけるような導線設計を意識しています。

I'M K PAGE

I'MK pageのmock up画像

このページでは、私自身がどんな想いでデザインに取り組んでいるか、そして大切にしている価値観や姿勢について紹介しています。RespectとLove、この2つを軸に、相手への敬意と自分の情熱を込めたデザインを心がけています。また、どんな仕事ができるのか、使用ツールやスキルもあわせて掲載することで、安心してご相談いただけるように構成しました。

MY PRODUCTS PAGE

my products pageのmock up画像

このページでは、各作品に込めた想いや、こだわったポイントをピックアップして紹介しています。なかでも力を入れて制作した5点(Emma Tattoo/Kaho Morita/Bonher Nail Salon/茶蔵-CHAKURA-/Yukoのロゴデザイン)については、情報設計やビジュアル面の工夫など、より詳細に解説。画像やイラストを用いて、作品ごとの背景や意図がより深く伝わるように構成しました。※掲載しているモックアップは「茶蔵-CHAKURA-」のページより抜粋しています。

DESIGN DETAILES

COLOR CODE

メインカラーは#FFFFFFと#000000のみで、メインビジュアルやCONTACTセクションなどのグラデーション部分等でメインカラー以外を使用しております。「ユーザーの方には掲載している作品の雰囲気をしっかりと感じていただきながら作品を見ていただきたい。」という思いから「MY PRODUCTS」のページは使用している写真のみにカラーがあるだけで、#FFFFFFと#000000のメインカラーのみ使用しております。

color codeの画像

THE TYPE OF FONT

-Hiragino Kaku Gothic ProN-

あいうえおかきくけこさしすせそたちつてと

ABCDEFGHIJKLMNOPQRSTUVWXYZ

123456789

-Prompt Medium-

ABCDEFGHIJKLMNOPQRSTUVWXYZ

123456789

-Bowlby One SC-

ABCDEFGHIJKLMNOPQRSTUVWXYZ

123456789

4 KEY POINTS

-Grid-

grid image

細かいグリッドやラインのデザインを取り入れることで、「繊細さ」や「真面目さ」といった印象を与え、私の内面的な性格「繊細さや真面目さ、謙虚さ」を視覚的に表現するためにこのデザインを使用しました。

-Gradiation-

gradation image

「カラフルで派手なものが好き」という私らしさを表現するため、カラフルなグラデーションを大胆にメインビジュアルやCONTACTセクションの背景画像に取り入れました。また、この選択はファーストビューでユーザーにインパクトを与え、このサイトに興味を持っていただくことを意図しています。更に使用したカラーは、明度と彩度を近づけることでカラーに統一感を持たせ、自然なグラデーションにしました。

-Film grain-

film grain image

CSSを使用して粒状フィルムのようなデザインにすることで、ポートフォリオ全体が1つの作品であるという雰囲気を演出できるようこのデザインを取り入れました。

mock up1
mock up2
mock up3
mock up4
mock up5
mock up6
mock up1
mock up2
mock up3
mock up4
mock up5
mock up6
img1
img2
img3
img4
img5
img6

MOCK UP

Back to product

Next product