Welcome to MOMOKA's Portfolio

地域に愛される喫茶店

1987年オープン、昔ながらの雰囲気が残る喫茶店の新規ホームページを制作しました。
サイトコンセプトは、地域のお客様にお店の家庭的な雰囲気を伝えること。
懐かしさや「また来たい」と思わせる印象を写真や配色で表現しつつ、華美になりすぎず、飲食店らしい食事の魅せ方も意識しました。

色について考える

サイトのカラーは、食品を引き立たせることを意識して白とクリーム色を基調にし、彩度は控えめにしました。 アクセントカラーとメインカラーは、看板の緑と赤をイメージして配色しています。
「昔ながら」「安心」といった印象を意識すると暖色が強くなりがちですが、暖色だけに偏らず、お店の雰囲気をうまく伝える色味になったと考えています。

ヘッダーのこだわり

お店の雰囲気を伝えることをコンセプトに、メインビジュアルは店舗入口の写真に決めました。
店舗は2階にあり、外観の雰囲気を伝えるためにビジュアルの高さを確保しています。 ヘッダーは店舗情報やコンバージョンを明確に掲載することを重視し、この形に落ち着きました。
さらに、文字サイズや要素間のgapはウィンドウ幅に合わせて可変に設定。1,000pxまでPCタイプの表示を維持できるようにしています。

メニューの豊富さをどう見せるか

オープン当初からオーナーが腕によりをかけて提供してきた豊富なメニュー。
選ぶ楽しさやオプションの多さを伝えるため、掲載方法を検討しました。 結果、グループごとにタブ分けし、画像はピックアップして大きく表示、メニュー内容は文字で整理する形に落ち着きました。
次のスライドでも触れておりますが、SP版では情報量を考慮し、全てアコーディオン形式で表示しています。

アコーディオンを活用する

PC版ではQ&Aのみをアコーディオン形式、SP版ではメニューもアコーディオンで表示しています。
コーディング時は、アコーディオンの外側・内側の色味や、各要素の囲み方、指定箇所などに悩みました。 赤×クリーム色の配色は、レトロなお店の雰囲気をうまく表現できているセクションだと思います。
動かしながら修正を重ね、スムーズに開閉できるようになったときは、とても安心したのを覚えています。

信頼感と安心感、スタートアップ企業のLP

スタートアップ企業の官公庁・自治体向け事業紹介LPを新規制作しました。全体を通して 安心感と信頼感 を打ち出しつつ、今後の展開への 期待感 も表現することを意識しています。
また、馴染みの薄い「補聴グラス」や「オンデマンド手話通訳サービス」を直感的に理解できるよう、イメージしやすいメインビジュアルを制作しました。

色について考える

安心感と信頼感をどのように表現するかを考え、まず最初に信頼感を重視して青系で統一することに決めました。
しかし、青単色だけでは安心感がやや不足すると感じました。また、同じ青系統の色味で期待感も表現したいと考え、寒色を基調にしつつ淡いグラデーションを加え、優しく温かみのある雰囲気を演出しました。

スケジュールの見せ方

ススタートアップ企業の今後のスケジュールを掲載することが決まっていたため、見せ方を検討しました。 参考事例を調べた結果、矢印のシェイプ内に文字を入れる形でデザインすることに決定。
コーディングではデザイン段階で詳細を把握していなかったため少々手こずりました。 矢印先端の三角形は、SVGファイルを擬似要素として追加して表現。
大変でしたが、さまざまな実装方法を学ぶ良い機会となりました。

画像を掲載する

現時点では一般的でないARグラスを使用したロジェクトのため、画像を多く掲載することを重視しました。
ただ並べるだけではなく、期待感を添えられるデザイン性のある配置を意識し、PC版では画像サイズを変えつつ配置。画像をクリックするとモーダル表示される仕様にしました。
SP版では、小さい画面でも見やすく、LPの縦の長さを考慮し、スライダーで表示する形に変更しています。

お知らせセクション

クライアント様からは元々「お知らせ」セクションの依頼はありませんでした。 しかし、LPの目的やクライアント様の活動内容から、お知らせを組み込むことでLPの意図をより強化できると考え、提案しました。
今回のLPは採用には至りませんでしたが、提案を通じてLPの意図に沿ったデザインの考え方や提案力を磨くことができました。

制作の意図

今回、自分自身のポートフォリオサイトを作るにあたり、自身の好奇心と行動力を表現するとともに、JavaScriptでどのような動きを実装できるかを学ぶことを目的に、可能な範囲で動きのあるサイトを目指しました。
見ていてワクワクするような演出を取り入れ、飽きずに楽しめると同時に、自分自身も制作過程を楽しめるサイトになったと考えています。

色について考える

コンセプトは「動きのあるワクワクするサイト」でしたが、自身のポートフォリオであるからこそ、好きな色合いで制作したいと考えました。
派手すぎず、ほっこりとした印象でありながら、静かすぎないバランスを意識。
メインカラーには濃いピンクを、アクセントとしてさらに濃い紫を使用しましたが、お互いがぶつかることなく調和する色の組み合わせになったと思います。

作品の見せ方

制作物を掲載する Works セクションでは、どのように作品を見せるかをデザイン検討の最初に考えました。
当初は、別ページで全体を一覧表示しつつ各項目に触れる構成も検討しましたが、「動き・ワクワク」をコンセプトにしていたため、JavaScriptを活かせる方法を優先。結果、モーダルウィンドウでの実装に決めました。
モーダル内では、各サイトごとのイメージカラーをタイトル部分に取り入れ、開いた際に統一感のある印象を持てるよう工夫しました。

文字で魅せる自分らしさ

自身を表現するキーワードとして 「好奇心」と「行動力」 を選びました。当初は単に文字として並べるだけでしたが、検討を重ね、文字を大きくしたり色を変えたり加工することで、より印象的に見せられるよう工夫しました。
さらに、説明の際には文字の意味を直感的に伝えつつ可愛らしさも加えるため、「好奇心」には "👀"、「行動力」には "👟" のイラストを文字デザインに組み込みました。
ぜひ About ページで、その表現や動きをご覧ください。

サイト全体の演出

サイト全体のイメージを統一させるため、メインビジュアルや About ページのバブルデザインを踏襲しました。 初回アクセス時のローディング画面、404エラーページ、TOPへ戻るボタンなど、すべてバブルがふわふわ動く演出にしています。視覚的に動きがあり、飽きずに楽しめるため、個人的にもお気に入りの仕上がりです。
また、SP用ハンバーガーメニューやスキルセットも、サイトの雰囲気に合わせたアニメーションを取り入れています。

オーガニック野菜直送販売の架空LPサイト

デジタルハリウッドSTUDIOのスクール課題として提示されている架空LPサイトを、自主制作として構築しました（専攻プランの都合により、スクール内では未着手の課題です）。
“オーガニック野菜を農家から直送で”を元に、PC版・SP版の両方をデザイン。デザインコンセプトは「気軽にオーガニック野菜を」。
ターゲットは30代半ばの小さなお子さんを持つ女性を想定し、日常の中で少しの豊かさや安心を感じてもらえる世界観を意識しました。ファーストビューでは彩り豊かな野菜を中心に構成し、全体的に“ワクワク感”と“自然のやさしさ”が共存するデザインに仕上げています。

色について考える

高級感とポップさが調和する配色を意識しました。
背景は白をベースに、メリハリをつけるためシャンパンゴールドに近い色味を採用し、高級感を演出。メインカラーには、主張しすぎないダークグリーンを使用し、彩りを添えるアクセントとしてオレンジ寄りのレッドを組み合わせました。
また、2色がぶつかりすぎないよう、全体を引き締めるシンプルな焦茶を加えることで、自然で落ち着いた印象に仕上げています。

書体について考える

主に使用している書体は、タイトルに「油性マジック」、本文に可読性の高い「Noto Sans JP」を採用しています。
「油性マジック」は手書き風でややポップな印象を持つ書体ですが、手作り感を演出したいオーガニックの世界観と相性が良いと考え、選定しました。また、オーガニックは高級感を打ち出すことも可能な商材ですが、今回は「気軽に」をコンセプトに掲げ、ターゲットをお子さんのいる30代女性に設定したため、“かわいさ”や“ワクワク感”を表現できる書体を選びました。
一方で、品質保証の項目には信頼感と安心感を与えるため、「Noto Serif JP」を使用しています。

画像、イラストの使い方

全体を通して、シンプルになりすぎず、かといってギラギラしすぎないデザインを意識しました。
イラストや写真の組み込みバランスを何度も検討し、オーガニック野菜の持つ自然な魅力を、ターゲットがどのように受け取るかを意識して構成しています。
彩り豊かでありながらも派手すぎず、どこか落ち着きのある印象になるよう、イラストや写真のトーンを調整しました。

商品の見せ方、コンバージョン

今回のLPは、“少量お試しセット”を訴求することを目的としたページです。華美になりすぎないことを意識しながら、価格やサイズ感などの要素はしっかりと視認できるよう配置。全体の色味も、強調すべき部分を際立たせつつ落ち着いた印象になるよう心がけました。
また、購入ボタンはヘッダー部分にも設置していますが、デザインの基調は崩さず、メインカラーである赤をあえてボタンのみに使用。これにより、全体のトーンを保ちながらも、視覚的な誘導としてボタンの存在感を際立たせることができました。

LPデザインしたスグ食べのバナー制作

LPの訴求内容を踏まえ、「スグ食べ」用のバナーを2種類制作しました。それぞれ訴求ポイントを変えながら、Photoshopの操作に慣れることも目的としています。
ターゲットはLPと同様に、
・30代半ばの子育て世代
・比較的お金に余裕がある層
・健康意識の高い層
を想定しました。
上記を踏まえ、全体としてギラギラしすぎず、しかし鮮やかさや彩りはしっかりと残すようデザインしています。 “オーガニック”らしい安心感と、“通販らしいワクワク感”を両立させるバランスにこだわりました。

初めてのバナーデザイン①

限られたサイズの中で「スグ食べ」の特徴である“農家直送”と“オーガニック野菜”をどう伝えるかに苦戦しましたが、伝えたい情報を整理し、視線が自然にキャッチコピーと価格に流れるよう構成しました。
特に、“初めての方限定 1,280円”という訴求を中心に置き、通販としての信頼感と親しみやすさのバランスを意識しています。制作を通じて、情報の優先順位や文字サイズ・余白の使い方ひとつで印象が大きく変わることを実感しました。今後はターゲットをより明確にし、感情に訴えかけるデザインを追求していきたいです。

訴求ポイントを再考したバナーデザイン②

まず、今回のLP制作にあたり「スグ食べ」の主要なポイントを再確認しました。“オーガニック野菜”“農家直送”“農家が選べる”“最短24時間以内にお届け”の4点を軸に構成し、閲覧者が一目で魅力を理解できるよう意識しています。
野菜の写真やお試しセットの価格、ボタン誘導までを一つのビジュアル内にまとめ、自然と興味を引き、次のアクションへつながるデザインに仕上げました。比較的文字量が多い構成となりましたが、文字サイズや行間、全体の縦横バランスを整えることで、小さい画面でも一定の可読性が保てるよう工夫しています。

色について考える

“野菜”を題材としているため、鮮やかさを意識しつつも、LP全体の印象に合わせて派手になりすぎないよう配色を調整しました。
基本カラーはLP制作時と同様のメインカラーを使用し、一部の文字には可読性を高めるために緑や赤の色味を微調整しています。 複数の色を使用していますが、全体のトーンバランスが崩れないよう意識して構成しました。
※①のデザインではLPと同様の赤を使用し、②のデザインではやや深みのあるダークレッドに変更しています。

バナー制作の今後の課題

・ターゲット像の明確化

どんな層にどんな印象を与えたいのかをより具体的に設定し、デザイン全体の方向性に反映させたい。

・情報の優先順位づけ

テキスト・価格・ボタンなど、視線の流れをより意識した構成にし、最も伝えたい要素を明確に見せる。

・訴求軸の整理とコピー力の強化

“価格訴求”と“安心感訴求”など複数の軸を比較検証し、最も効果的な打ち出し方を研究したい。

・Photoshopでの質感・表現力の向上

細部の調整や装飾表現など、より完成度を高めるための操作技術を磨いていく。