モカデザイン ポートフォリオ

WordPressで制作した会社サイト

使用ツール：Wordpress
テーマ：cocoon
※左の画像をクリックするとサイトイメージ画像が拡大します。

デザインコンセプト
【Webページを作る目的】
ホームページを作りたいと思っているお店や企業様に、会社の取り組みやサービス内容を知ってもらいたい。【ターゲット・ペルソナ】
女性向け　お店もしくは中小企業【掲載する情報】
サイト制作の流れ【デザインのコンセプト】
キーカラー：桃色　琥珀色　白色でカラフルに。
キービジュアル：画像を使い流れをわかりやすく。会社のSNSを載せることにより、実際のSNS運用を見てもらう。ネットからの集客をはかりたい方に訴えたい。

HTML/CSSで制作したカフェサイト

サンプルサイト：HandｍadeCafe

使用ツール：Photoshop　HTML/CSS　JavaScript　Bootstrap4

※左の画像をクリックすると画像が拡大します。

デザインコンセプト

【Webページを作る目的】
お店が空いている時間帯　平日の開店～12時、13時半から夕方の客数を増やしたい。トップページの写真からお店の雰囲気を知ってもらう。ドリンクや料理、イベント情報を伝える。「子供が幼稚園や学校に行ってる時間に来店したい」と思ってもらう。家でも楽しめるコーヒー豆やパンケーキミックスの購入に繋げたい。

【ターゲット・ペルソナ】
30代の既婚女性。子供がいる。パート勤務や専業主婦で平日の日中に時間が作れる。

【掲載する情報】
イベント情報・お勧めの飲み物・このカフェのコンセプト・ハンドメイド制作体験など。

【デザインのコンセプト】
キーカラー：パステルカラー　キービジュアル：可愛い　フォント：丸ゴシック
女性の来店を増やしたいので、白と紫を基調として可愛い色でまとめる。メイン画像は紅茶のポット画像で雰囲気を伝える。丸ゴシックや楷書体を使い柔らかい感じを出す。ボタン類は角丸にする。

広告バナー/商品画像

ドレス
前からのイメージと後ろからのイメージのサイズを変えました。ラインが綺麗なドレスなのでシンプルにしています。ドレスの文字はネオン調。

マカロン
マカロンは高価な菓子なので、文字を黄金にし高級感を出しています。贈呈用です。

ダイエットドリンク
ブラシで炎を作り燃焼を表現しました。人物は白黒にし、インパクトを付けました。

眼鏡
女性・学生さん向け商品向けページに飛ぶバナーで、若いイメージで作りました。

イヤリング
高価格商品なのでシンプルに高級感を出しました。JEWELRYの文字の色は商品から取っています。

オレンジジュース
画像を明るめにし健康的なイメージで作りました。

ワインバー
写真を切り抜き背景から浮かないように工夫しました。キラキラはブラシを使用しています。

ハロウィーン
かぼちゃの写真を使用し、文字とかぼちゃを同じ色にしました。

お米の販売店用バナー
厳選したお米だけを販売しているお店用のバナーです。1200px × 628px

ワインバーBacchus
４つの画像を組み合わせ明るさ・大きさを調整し真ん中に店名を入れました。1920px × 1080px

占い用バナー広告
1200px×628pxと300p×300pxの2サイズ。ゴールドのデザインをそのままに、背景と色味を変え夜空のイメージにしました。

占い用バナー広告
1200px×628pxと300p×300pxの2サイズ。背景は明るい色のグラデーション、羅針盤を金にし、いい未来をイメージできるデザインにしました。

チラシ

Canvaのテンプレートを使いアレンジしました。

自己紹介

モカ
Webデザイナー/マークアップエンジニア
年齢：34歳
子供：4歳と1歳

オンラインスクールのコードキャンプでWebデザインを学び、画像加工やコーディングスキルを身につけました。Photoshop、illustrator、HTML/CSS、Bootstrap、JavaScriptが使用できます。
WordPressでブログを運営しており、CMSを利用したサイト制作や、Googleツールを利用したSEO対策を日々学んでいます。Wordpressで使用しているテーマはcocoonです。
ポートフォリオサイトの作成では、商品画像の制作やサンプルサイトを作りました。
これまでの仕事は調理をメインに接客やテレアポなど人と接することが多かったです。今までの経験で培った段取りを組む力やコミュニケーション能力が活かせると思います。