Topics
MulberDen
- Project
- 株式会社マルベルデン
- Type
- コーポレートサイト
- Category
- クリエイティブ
- Design
- Webデザイン, ロゴデザイン, 名刺デザイン
- Development
- レスポンシブレイアウト
- Technique
- THREE.js, GSAP, AWS
I. プロジェクト概要
インボイスナンバーの情報追加にあわせ、会社概要や制作実績の更新、よくあるご質問（FAQ）ページの追加を行ないました。
インフラは引き続き「Amazon S3＋CloudFront」のAWSサーバーレス環境にて、フロントエンドではThree.jsやGSAP等を利用した新しいプログラムを導入しています。
上記にあわせて背景動画の使用をやめ、視線誘導したい箇所を中心に印象的なスクロールアニメーションやマウスアニメーションを追加。また404エラーページ（ページが見つからない時の転送ページ）の他、ハンバーガーメニュー（右上の ≡ ボタン）を開閉時やページ遷移時に遊び心溢れるアニメーションを追加しデザイン面を改良しています。
制作のポイント
Design
「鳥のように飛んで行こう、そして宇宙まで」という遊び心を追及しすぎた謎の世界観でデザイン作成
Development
視線誘導したい箇所を中心に印象的なスクロールアニメーションとマウスアニメーション。遊び心溢れる404エラーページやハンバーガーメニューを作成
Technique
「CloudFront → S3 → API Gateway → Lambda → SES」のAWSサーバーレス環境で常時SSL化、サーバーレスお問い合わせフォーム、FAQ非同期検索フォームを構築
II. ヒストリー
-
2012年9月
PC・iPhone/Android・名刺などのメディアを統一したデザインコンセプトに、コンパクトに伝えられるよう設計。Webサイトは1ページに内容を凝縮した縦長のコンテンツにて、Javascript（jQuery）で随所に工夫を施すことでユーザビリティに配慮。
-
2014年8月
大画面でも見やすいよう全体のコンテンツ幅を広げ、レスポンシブ化＋スマートフォン・タブレットに個別に対応。様々なデバイスで閲覧した場合でもスムーズにサイトを閲覧できるように工夫を施し、技術面ではHTML5の導入と、ロードアニメーションを新たに加え、シンプルなデザインに高級感を出せるよう、インタラクティブコンテンツを導入。インフラはAmazon S3クラウドストレージサービスやTypeSquareやGoogle Fonts等のWebフォントサービスを新たに利用。
-
2017年2月
ファーストビュー領域に調整を加え、表現としてはHTML5 Canvasアニメーション（鳥等のパーティクル要素）の導入や、スクロールアクションを新たに加え、サイト間の移動で雲を突き抜けるようなアクションを加え、浮遊間が出るよう設計。技術面では全体的に高速化できるよう、jQueryでのプログラムをCSS3等に極力代替することで軽量化をおこない、またWordPressにPJAX（非同期通信）を導入することでサイト間のアクセス数を抑えシームレスなページ遷移に。インフラは、Cloudflareにネームサーバーを変更し、キャッシュコントロールやコンテンツデリバリーネットワーク（CDN）の利用、各種ファイルデータの圧縮他、諸々のWordPressチューンナップをおこなうことでスピードアップをはかり、Javascriptを多く使用したサイトにおいても快適に閲覧できるよう工夫。
-
2020年5月
全体的にアニメーションを減らし、視線誘導したい箇所を中心に印象的なスクロールアニメーションとマウスアニメーションを追加。インフラはAWS S3にてサーバーレス環境を構築し、お問い合わせフォームはAPI Gateway → Lambda → SESにて、CDNはCloudflareからCloudFrontに変更し、チューンナップをおこなうことで最適化をはかり、アニメーションを多く使用したサイトにおいても快適に閲覧できるよう工夫。
-
2021年4月
トップページのローディング画面にのみ、円形テキストレタリングSVGアニメーションを既存のプリロードにあわせ追加。また「03.WORKS」のカルーセルスライダーにプログレスバー（自動再生の進捗状況を視覚的に表示）と停止・再生ボタン追加。メールサービスをAmazon WorkMailからムームーメールに変更。
-
2023年9月
Three.jsやGSAP等の新しいプログラムを導入。FAQ非同期検索フォームを構築。
