自主制作でデザインしたスウェディッシュリラクゼーションサロン『Henrik』のWebサイトです。お店の魅力や温かいストーリーを伝えつつ、利便性を向上させることを目指しました。

お店のバックグラウンド

　45年前、オーナーのモリカワ・ミチコがムーミンに会うためフィンランドへ旅立ったところ、誤ってスウェーデンに到着したのがきっかけです。意気消沈しながらも偶然立ち寄った老舗のマッサージ店『Avkoppling Salon Henrik』でスウェディッシュマッサージに出会い、その魅力に人生が一変。すぐに弟子入りし、5年間の修行を経て暖簾分けが許されました。
　日本でもスウェディッシュマッサージを広めたいという使命感から、新宿に『リラクゼーションサロン・ヘンリック』をオープン。少人数制のアットホームな雰囲気と、お客様1人ひとりに寄り添う姿勢で親しまれています。

目的

①現在、予約は電話のみなので、お客様が24時間いつでも予約できるWebサイトを作成することで利便性を向上させたい。

②初めてのお客様にもお店の雰囲気やコース内容、ご利用方法を分かりやすく伝えるためのサイトがほしい。

目的を達成するためにしたこと

①どのページからでも予約ができるように、予約ボタンを固定表示（fixed）で大きめに配置。

②初来店する方に向けて「初めての方へ」ページを作成し、利用方法や注意点を分かりやすく説明。全くお店を知らない方にも魅力を紹介できるように、「ヘンリックについて」と「スタッフ紹介」ページを作成。

デザインの工夫

『Henrik』のテーマである「自然」と「健康」に基づき、優しく癒しを感じられるデザインを意識しました。全体的にパステル調でコントラストを抑え、リラックスできる雰囲気を演出しています。

フォント：アルファベットは丸みのあるフォントを採用し、親しみやすさを表現。日本語はしなやかな明朝体を選び、上品さと柔らかさを強調。

カラー：癒しを感じるペールグリーン (#3BC8A7)、 自然を感じるベージュ (#F0E4D1)、 オーナーの好きなピンク (#EFC9C7)を使用。

html

scss

JavaScript

多肉植物専門店『BO-BO-（ボーボー）』のWebサイトです。少し昔の雑誌のような、ポップなデザインを目指しました。

バックグラウンド

BO-BO-は板橋区にある多肉植物の販売・栽培を行っている中規模の園芸店です。店主が丁寧に栽培した植物や、こだわりを持っている農家の植物を扱っています。マルシェへの出店や、お店でのワークショップ・講演会など、イベントも精力的に行っています。

目的

① オンラインでも販売したい。

②多肉植物やお店の情報を伝えたい。

目的を達成するためにしたこと

① オンラインショップを開設。実物を見なくても安心して購入できるように、ディティールページで多くの写真を掲載しました。また、購入前にお店から商品の写真を送ってもらうことも可能です。

②多肉植物やお店の魅力を、雑誌のように楽しめるサイトにしました。写真を多用し、見ているだけで楽しめるデザインを採用。情報をカテゴリー分けし、体系的に閲覧できる動的なサイトにしています。

デザインの工夫

BO-BO-という名前の通り、植物が生い茂るような生命力あふれるサイトを目指しました。ユーザーがまるで植物の温室に足を踏み入れたかのような雰囲気を感じ、視覚的にも心地よく楽しめるデザインを意識しています。

カラー：植物をイメージしたグリーンを基調としました。また、さまざまな緑を使うことで、植物園のような雰囲気を演出しています。

BENTO UI：昔の雑誌のように、各要素をボーダーで囲みました。お弁当のように情報がぎゅうぎゅうに詰まった、楽しいレイアウトを意識しています。

html

css

JavaScript

初めての自由課題でデザインした美術展『ルドン展 海へのまなざし』のWebサイトです。美術展のサイトが好きなので制作してみようと思いました。既存の美術展サイトを参考にし、作品のキャプションには適切にCC0ライセンスを記載しています。

バックグラウンド

YAMA MUSEUM [東京・上野公園]で開催される大規模美術展『ルドン展 海へのまなざし』。神話的な人物や色彩豊かな花の作品で知られるフランスの画家オディロン・ルドン。その中でも海を描いた作品に焦点を当て、画家の「海へのまなざし」が精神世界にどのような影響を与えたのかをたどる展示です。

目的

①中学生から高齢の方まで、展示概要がわかるサイトが必要。

②展示に足を運びたくなるように、ルドンの魅力を伝えたい。

目的を達成するためにしたこと

① トップページに「今日の日付」や「開館情報」を表示し、閉館日に来館してしまうミスを防止。また、チケット購入やグッズ購入ボタンを大きく配置。

②作品画像を多く使い、視覚的に作家の魅力を表現。文章は読み物として構成し、作家の思想や感性を伝えるよう意識した。

デザインの工夫

来館者の多い美術館の特性を踏まえ、「分かりやすさ」を重視しました。展示はポスターやテレビで周知されているため、サイトでは「開館時間」「展示の構成・説明」「チケット購入方法」に特化した情報を提供しました。

カラー：「海へのまなざし」というテーマに合わせ、ルドンの作品『ブルターニュの海辺の村』を背景に使い、全体を海をイメージしたカラーで統一しました。

隠し要素：フッター上の浮遊する頭部をクリックすると、簡単なJavaScriptの占い「ルドンうらない」が楽しめます。隠し要素として遊び心を取り入れました。

html

css

JavaScript

自主制作でデザインしたショコラティエ『トリコレート（toricolate）』のWebサイトです。季節を感じさせ、定期的にアクセスしたくなるサイトを目指しました。

お店のバックグラウンド

　トリコレートは丸の内に本店がある、高級チョコレートを取り扱っているブランドです。バレンタインデーなど季節ごとに特別コレクションを含むさまざまなチョコレート製品を販売しています。ただし、現状のWebサイトは出店に伴って作成した簡易的なものであり、トリコレート特有の魅力を伝えるコンテンツが不足しています。これを解消するため、サイトリニューアルの提案を受けました。

目的

①季節ごとの限定商品やキャンペーンのプロモーションがInstagramのみで行われており、Webサイトでの強化が求められた。

②お店の歴史やパティシエの紹介など、トリコレートの魅力を伝えるコンテンツが不足している。

目的を達成するためにしたこと

①季節のおすすめ商品やキャンペーンをページの上部にバナーを設置。

②お店のストーリーを伝えるため、「チョコレートができるまで」「トリコレートの歴史」「ショコラティエのご紹介」の3ページを新たに制作。

デザインの工夫

季節の表現：期間限定商品への購買意欲を高めるため、サイトに定期的にアクセスさせるために季節を感じさせる画像・装飾を施しました。

フォント：タイトルには高級感のあるセリフ体、目立たせたい文字や説明文にはゴシック体を使用して、可読性を向上。

カテゴリー：ユーザーが目的の商品に簡単に辿り着けるよう、カテゴリーを細分化し、グローバルナビゲーションとフッターに配置しました。フレーバー、限定商品、価格などから選択できるようにしています。

html

scss

JavaScript

自主制作のエコツアー専門サイト『NA Tours』。南米や北極への旅を夢見、自然の美しさに癒されたいという想いから、このサイトを作成しました。

お店のバックグラウンド

　NA Toursは、1998年にカナダで設立されたエコツアー専門旅行会社です。私たちのミッションは、お客様が自分の足で大自然を冒険できるようサポートすること。そのため、ロゴマークには「ブーツ」を象徴として用い、「自分の足で冒険する」という意味を込めています。最初は国内向けのツアー会社でしたが、社長がFacebookで知り合った日本人・山田さんと趣味のルーマニア文学談義に花を咲かせたことがきっかけとなり、日本向けのサービス展開が決まりました。山田さんが経営する翻訳・ローカライズ専門会社の協力で、日本向けサイトを開設する運びとなりました（オフィスはカナダのみ）。

目的

①エコツアー専門店ということを全面的に押し出してほしい。

②日本からも簡単にコンタクトできるようにしたい。

目的を達成するためにしたこと

①トップページに大自然の美しい写真をグリッド配置し、自然体験を強調。「地球がくれる冒険を、NA Toursで。」というキャッチコピーを掲げ、観光とは異なる冒険的な旅の魅力を表現。

②日本で馴染みのあるオーソドックスなお問い合わせフォームを設置し、操作に迷わないよう配慮。

デザインの工夫

NA Toursの特徴である「自然の美しさ」を体現するため、冷たさ・無骨さ・シンプルさを表現したデザインを採用しました。

イメージ：自然の美しい写真を随所に配置し、見るだけで癒されるような雰囲気を作り出しました。ボックスシャドウにはオーロラのような寒色を使用し、神秘的で清々しい印象を与えています。

カラー：コーポレートカラーのブルー (#0696C6) を基調とし、自然の澄んだ空気感を感じさせるように全体を統一しました。

html

css

JavaScript

こちらは、授業で制作したフラワーショップ『nico』のサイトです。サイトに文章や装飾を追加し、より魅力的な内容に仕上げました。

お店のバックグラウンド

　『nico』は、10年前に東京都新宿区の「曙橋駅」近くで開店した、小さなお花屋さんです。「nico」は「にこにこ」から名付けられ、お花を通じてお客様に笑顔を届けることを大切にしています。取り扱い商品はお花や園芸雑貨のほか、お花の教室も開催しており、地域の人々に愛されています。

目的

①お花の教室や大型花束の予約を、24時間オンラインで受け付けられるようにしたい。

②現在のブログは頻繁に更新されているが、新しいサイトに移行して、より便利に利用できるようにしたい。

目的を達成するためにしたこと

①サイト全体にグローバルナビゲーションを固定し、ページの上部とフッターにお問い合わせボタンを設置することで、ユーザーのアクセスをより円滑にした。

②お知らせページをアーカイブ化し、一覧から過去のお知らせを簡単に閲覧できるようにした。しかし、HTMLのみでは管理が不便だったため、WordPressへの移行を検討中。

デザインの工夫

お花を気軽に相談できる雰囲気を大切にし、商品のセンスの良さを引き立てつつ、優しさとアットホームな雰囲気を伝えるデザインにしました。装飾にはアールを意識し、角張った印象を与えないように配慮しています。

フォント：ロゴとキャッチコピーには手書き風の筆記体フォントを使用し、柔らかな雰囲気を表現しました。

画像：美しいブーケの動画をページの上から下まで配置し、ページ全体に統一感を持たせるとともに、背景が見え隠れする視覚的におもしろい効果を生み出しました。

html

css

JavaScript

趣味で制作したミステリー全般情報サイトです。ニュースサイトに関心があるため制作しました。記事の更新の多い動的サイトなので、WordPress化をしています。

サイトのバックグラウンド

　このサイトは、元東京草原社の編集者が2000年にフリーランスとして開設したミステリー専門の情報サイトです。最初は個人で執筆していましたが、現在では新人作家へのインタビューや書評家による寄稿など、さまざまな形でコンテンツを多様化させています。サイトは、出版社や国、メディアの垣根を越えて、ミステリーというテーマに関連するあらゆる情報を網羅しています。

目的

①現在はテキストメインのサイトなので、よりビジュアルに訴えるデザインを採用し、視覚的に魅力的なサイトにしたい。

②記事へのアクセスを促進し、読者に多くのコンテンツに触れてもらいたい。

目的を達成するためにしたこと

①「今月のおすすめ新刊」を無限スクロールで表示し、訪問者がクリックせずに視覚的に情報を取得できるようにした。

②注目記事や新着記事を目立たせるため、視覚的にインパクトのある画像や大きなグリッドレイアウトを採用し、より多くの読者が関心を持てるよう工夫。

デザインの工夫

ニュースサイトとして、複数回同じ記事が表示されるため、データベースと効率的な記事管理が重要であると認識しました。また、記事タイトルを短くキャッチーにしてクリックを誘導するなど、コピーライティングにも注力しました。トップには「本棚」のビジュアルを採用し、まるで本屋さんや図書館で本を選ぶような楽しさを提供しています。ブックデザインにも細かなこだわりを持ち、パロディとして自作した本の表紙も使用しました。
コンテンツ管理をよりスムーズに行うため、WordPressへ移行しました。これにより、更新作業が効率化され、より多くのコンテンツを迅速に反映できるようになりました。また、複数の権限を持つユーザーが編集作業を行えます

トップ画像：私自分の好きな作家をコラージュし、モノクロ写真をカラー化してザラザラ感を加えました。これにより、作家たちの時代を超越した世界観を表現しました。画像は趣味で作成したため、ポートフォリオに載せるべきか迷いましたが、画像加工のスキルを示すサンプルとして掲載しています。

html

css

JavaScript

WordPress

Illustrator

Photoshop

CLIP STUDIO PAINT

制作している絵などの作品をまとめたポートフォリオです。

目的

①楽しく絵を見てもらいたい。

②依頼や質問を受け付けるためにコンタクトフォームが欲しい。

目的を達成するためにしたこと

①背景にランダムで絵が配置される仕組みや、CSSアニメーションを加えて動きのあるサイトにした。

②コンセプトに合わせたコンタクトページを作成し、Googleフォームを埋め込んで、サイト以外でも共通で使用できるようにした。

デザインの工夫

背景のランダム配置
3秒ごとに絵の大きさ・数・位置がランダムに変化します。また、クリックすると全ての処理がリセットされます。

お絵描きコーナー
サイトに長く滞在してほしいという思いから、フッター上に「お絵描きコーナー」を設置。ペンと図形が使用可能で、描いた絵は保存できます。

html

scss

JavaScript

Illustrator

Photoshop

自分のロゴを作り、サーバーにアップするという課題で制作しました。

ロゴの目的

①名前を覚えてもらう

②興味を持ってもらう

目的を達成するためにしたこと

①視認性の低いアルファベットは避け、音で覚えやすいひらがなを使用。

②目を引くようなコントラストの大きい色を採用し、キャラクター性も追加。

デザインの工夫

忙しい人でも直感的に理解できるよう、図を多く使いながらシンプルにまとめました。さらに、GSAPを使ってスクロールに応じてロゴが回転するアニメーションを加え、動きのあるデザインに。これにより、視覚的な変化が楽しめ、自然とスクロールを続けたくなる仕掛けになっています。

フォント：読みやすいようにフォントサイズを大きめに設定。

カラー：黄色が好きなので、ロゴは黄色と決めていました。ロゴに合わせて、補色よりも黄色に近い青緑を背景に使用しました。

html

scss

JavaScript

Illustrator

Photoshop