MulberDen

Project
株式会社マルベルデン
Type
コーポレートサイト
Category
クリエイティブ
Design
Webデザイン, ロゴデザイン, 名刺デザイン
Development
レスポンシブレイアウト
Technique
Google Maps API, AWS

I. プロジェクト概要

前回のリニューアルから2年が経過した2018年にリニューアル計画をスタート。Web制作の場合、多くは プラン設計 → デザイン → コーディング といったように上流工程から作業を進行させるウォーターフォール型の手法を用いますが、今回はひとつひとつやりたいことや機能を増やして完成形を目指すアジャイル型の手法で制作しています。

大きな目標はインフラ面の強化で、現在の「レンタルサーバー+Cloudflare」を「Amazon S3+CloudFront」のAWSサーバーレス環境を構築し移管させるとともに常時SSL化することでした。
メールサーバーは立てず、「CloudFront → S3 → API Gateway → Lambda → SES」といった流れで、サーバーレスでも動作するお問い合わせフォームを実装しています。

もう1つの目標はAjax(WordPress+Pjax)での非同期通信をやめ、そのうえでプレーンで高速なサイトにすることでした。
Ajaxで構築したサイトは高速でハイパフォーマンスでしたが、高度に機能を組み込んで構築したサイトにおいてはちょっとした機能追加や仕様変更でとても手がかかってしまうことが多かったというのが一番の理由です。これは技術的な側面もありますが、即時更新できる環境を担保することを優先しました。

最後の1つはデザイン面の改良で、全体的にアニメーションを減らし、視線誘導したい箇所を中心に印象的なスクロールアニメーションとマウスアニメーションを追加。また遊び心溢れる404エラーページ(ページが見つからない時の転送ページ)を追加しています。

制作のポイント

  • Design

    空を飛ぶ鳥のような世界観でデザイン作成

  • Development

    視線誘導したい箇所を中心に印象的なスクロールアニメーションとマウスアニメーション。遊び心溢れる404エラーページ作成

  • Technique

    「CloudFront → S3 → API Gateway → Lambda → SES」のAWSサーバーレス環境で常時SSL化、サーバーレスお問い合わせフォームを構築

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に変更し、チューンナップをおこなうことで最適化をはかり、アニメーションを多く使用したサイトにおいても快適に閲覧できるよう工夫。

l o a d i n g