コンテンツへスキップ
印象点：
- バイオリンの色彩と温かみのある光
バイオリンの色や、工房の仄かな白熱灯のような光（低K）を、実際の写真とイラストでそれぞれ表現し、それらを組み合わせていて、温かく優しい雰囲気を演出している。
- シンプルで丁寧な構成
必要な情報に絞り込み、ユーザーが迷うことのないシンプルで丁寧な構成。セピア写真の背景を持つナビメニューも分かりやすく、ユーザーフレンドリーな設計になっている。
- 工房の静かな空気を伝える演出
工房で丁寧に製作している雰囲気が、揺り椅子の上に置かれたバイオリンのイラストから伝わってくる。音楽記号のようなメニューボタンの開閉アニメーションも、サイトのテーマに沿った静かな空気感を高めている。
home に戻る
印象点：
- 商品のイメージに沿った色彩
商品に近い色合いで、淡く角のないカラーパレットを採用している。各産地素材そのものの色がアクセントとして機能し、統一感を生み出している。
- 産地と連動したインタラクティブな地図
スクロールに伴い、日本地図上の産地がクローズアップされ表示される。パララックス効果で地図への視点が近づいたり離れたりするほか、固定表示の雲と鳥がついてくることで、物語性のある体験を提供している。
- ニューモーフィズムのUI
アイコンなどのUIが、ニューモーフィズムで立体的に表現されている。これにより、シンプルでありながらも触覚的な印象を与えている。
home に戻る
印象点：
- モノトーンで表現された宇宙感
全体が白黒のモノトーンで統一され、宇宙的な雰囲気を演出している。
- 統一感のあるデジタルフォント
デジタル数字フォントが使用されており、昔の計算機のような、数値的に統制された感覚を与えている。
- テクノロジーを制御する印象
ヘッダー右下に小さく表示された動画サムネイルが、テクノロジーを冷静にコントロールしているような控えめな印象を与えている。
home に戻る
印象点：
- メリハリのあるUIデザイン
メニューの文字やSNSリンク、スクロール誘導といった補助的なUIのサイズを小さくしており、コンテンツとの間にメリハリを生み出している。
- 目を引くロゴデザイン
ほぼ白地のヘッダーに配置されたリード文の「Good」の「oo」部分に目がデザインされており、見る人の注意を惹きつける効果的なアイキャッチ。
- 動画のユニークな見せ方
大きめの角丸の中に動画を切り抜いて見せるデザインになっており、動画が持つ雰囲気を柔らかくし、サイト全体のトーンと調和させている。
- 背景色の工夫
白地のヘッダーが単調にならないよう、続く背景色に薄いグレートーンが使われており、様々なエンターテイメント要素がまとまりを見せている。
- ロゴを模したアニメーション
ロゴを模したバブルガム人形のようなアニメーションになっており、遊び心とブランドの個性を表現している。
- 80年代風のイラスト
サービス紹介パネルに、80年代風のイラストが使用されている。程よくポップな雰囲気が、コンテンツを親しみやすくしている。
home に戻る
印象点：
- ユニークなロゴアニメーション
傾いた©︎が印象的なロゴが、スクロールで上部に縮小しながらフェードアウトし、同時に写真がクローズアップされ、視覚的な楽しさを生み出している。
- スタイリッシュな写真の質感
明度と彩度を控えめに、コントラストを強めた写真が使用されており、自然光や白熱灯の落ち着いた明かりを感じさせる、スタイリッシュな雰囲気を演出している。
- 文字と背景の融合
「Apparel」の文字がmix-blend-modeやclip-pathのような手法で色反転していて、背景と文字のコントラストを生む効果的なデザイン。
- スクロールと連動する写真切り替え
左側の飲み物写真エリアが、スクロールに応じて写真が切り替わり、サイトを探索するような感覚でコンテンツを楽しめる。
- カルーセルによる横方向の広がり
複数のカルーセルが横方向に配置されており、視覚的な広がりを感じさせる。
home に戻る
印象点：
- シンプルながらインパクトのあるロゴ
ロゴがシンプルでありながら、インパクトがあり印象に残る。
- 生き生きとした写真表現
写真に人物の縁取りや、矢印・吹き出しのような手書きのアニメーションを加えており、生き生きとした印象を与える。
- 手書き文字による温かみ
随所に配置された手書き文字から、等身大感、息吹が感じられる。
- 背景のグラデーションによる実在感
背景の上部に薄く明るいグラデーションが施されている。これは照明のようで、空間に実在感のある明かりをもたらしている。
- ロゴと文字のメリハリ
「Morght」のロゴ文字が大きく配置され、他の文字とのジャンプ率にメリハリがあり、元気の良い印象と同時に、視覚的なアクセントを生み出している。
- ユニークなナビゲーション
縦に小さく並ぶナビゲーション項目や、メニューボタンを押した時に円形に広がるアニメーションからダイナミズムを感じられる。
home に戻る
印象点：
- 幾何学的な3Dアニメーション
トップページに、ゆらめく幾何学的な3Dメッシュの線形アニメーションが印象的。スクロールすると違う形を読み込む演出も、ユニークな体験を生み出している。
- 思索的な背景色
無漂白の紙色のような背景から、どこか哲学的な、文字だけの文庫本から感じる思索的な雰囲気が感じられる。
- 確かな技術力とシンプルな装飾
「つくっているもの」ページの実例一つひとつから、確かな技術力が感じられる。それらの技術力を活かすためのシンプルな装飾も効果的。
home に戻る
印象点：
- 「ドキドキ」を表現するアニメーション
ヘッダーの「ドキドキしよう」という文字が、実際にドキドキしているようなアニメーションで表示されており、サイトのテーマを視覚的に伝えている。
- 大胆な文字サイズによる強いメッセージ
文字サイズを大胆に大きくすることで、ストレートで本音のような強いメッセージを表現している。
- ABOUTページのユニークなレイアウト
ABOUTページでは、左側に写真を固定表示し、右側にテキストを配置するレイアウトになっており、写真と文章を同時に見せ、効率的な情報提供を可能にしている。
- 豊富な施行例とフィルタリング機能
WORKSのページには豊富な施行例が掲載されており、フィルタリング機能を通じてユーザーが求める情報を簡単に見つけられるようになっている。
- ユニークなメンバー紹介
MEMBERのページでは、それぞれのメンバーにユニークなキャッチフレーズが添えられており、個々の個性を際立たせ、親近感を与えている。
home に戻る
印象点：
- 全体に漂う遊び心
サイト全体に遊び心のある雰囲気が感じられ、ユーザーは楽しみながらコンテンツを閲覧できる。
- ユニークなイラストの切り替え
エントリーCTAの上に、スクロールによって切り替わるゆるいイラストが表示されており、視覚的な面白さを生み出し、ユーザーの関心を惹きつける。
- スクラップブックのような整理方法
スクラップブックのように、写真素材などにフラグを立てるような切り貼り感が特徴。情報が整理されているだけでなく、ユニークな世界観を表現している。
- ドラマのある開発事例ページ
リンク先の開発事例のページが、単なる実績紹介に留まらず、読み物としても楽しめるように作られており、企業の専門性と魅力を効果的に伝えている。
home に戻る
印象点：
- 動画による自然の中の感覚
ヘッダーの上部と、フッターの下部に少しスペースを空け、そこに動画を表示している。これにより、「自然の中に」存在している感覚を効果的に高めている。
- クラフト感のある優しいトーン
クラフト紙のような質感に加工を施した、落ち着いた優しいツートンカラーと手書き風のイラスト。温かみのある雰囲気を生み出している。
- さりげなく見やすいメニュー
メニュー項目とセクションタイトルを、あえて()で囲っている。さりげないデザインでありながら、それぞれの項目を視覚的に見やすくしている。
- イラストと表による分かりやすい説明
イラストと表を併用し、木からお酒ができるまでのプロセスを非常にわかりやすく表現している。
- 効果的な点線ボーダー
それぞれの木の違いを示すイラストを囲う点線ボーダーなど、枠線が効果的に使われており、コンテンツのまとまりを視覚的に示している。
- 自然を表現するアニメーション
回る年輪や、レイヤー上側に配置された揺れる木のイラストが、自然の中にいるという感覚をさらに高めている。
home に戻る