MulberDen

Date:

Category: サービス

MulberDen(マルベルデン)オフィシャルサイトのリニューアル制作を行いました。

[02.01, 2017]
デザイン面ではファーストビュー領域に調整を加え、
アクセス時に印象に残りやすいよう1画面での展開に落とし込みました。
表現としてはHTML5 Canvasアニメーション(鳥等のパーティクル要素)の導入や、スクロールアクションを新たに加え、
サイト間の移動で雲を突き抜けるようなアクションを加え、浮遊間が出るような設計を目指しました。

技術面ではまずは全体的に高速化できるよう、jQueryでのプログラムをCSS3等に極力代替することで軽量化をおこない、
またWordPressにPJAX(非同期通信)を導入することでサイト間のアクセス数を抑え、移動がシームレスにおこなえるようになりました。

※PCブラウザにおいて余分な再ロードをおこなわない(動画や音源を再生した状態でサイト間を移動しても再生が途切れない等)

タブレット・スマートフォンの描画においてもあえてPCとほぼ同じソース(レスポンシブ)を表示しており、
4G等のモバイルの回線スピードによっては重くはなりますが、PCと同等の表現ができるという意味でご覧頂ければと思っております。

バックボーンでは、Amazon S3クラウドストレージサービスからCloudflareに変更し、
キャッシュコントロールやコンテンツデリバリーネットワーク(CDN)の利用、各種ファイルデータの圧縮他、
諸々のWordPressチューンナップをおこなうことでスピードアップをはかっており、
Javascriptを多く使用したサイトにおいても快適に閲覧できるよう工夫をしています。

[08.22, 2014]

MulberDen リニューアル2014

間もなく2周年にて、
当初のベースを生かしつつ、新しい技術の導入とコンテンツ改修を行いました。

デザイン面では大きな画面でも見やすいよう全体のコンテンツ幅を広げ、
レスポンシブ化+スマートフォン・タブレットに個別に対応。
様々なデバイスで閲覧した場合でもスムーズにサイトを閲覧できるように工夫を施しました。

技術面ではHTML5の導入と、ロードアニメーションを新たに加え、
シンプルなデザインに高級感を出せるよう、ダイナミズムを取り入れました。

またバックボーンではAmazon S3クラウドストレージサービスや
TypeSquareやGoogle Fonts等のWebフォントサービスを新たに利用しています。

[09.06, 2012]

MulberDen リリース

この度、MulberDen(マルベルデン)として新たな活動をスタートしました。
ホームページの企画・制作・運営まで総合的にプランニングします。

今回は自社サイトの制作ということもあり、
PC・iPhone/Android・名刺などのメディアを合わせたデザインをコンセプトに、
マルベルデンについてコンパクトに伝えられるよう設計しました。

1ページに内容を凝縮しているため縦長のコンテンツになりますが、
Javascript(jQuery)で随所に工夫を施すことでユーザビリティに配慮しています。

今回の制作は、単に技術的な挑戦でもありましたが、
技術的に難しいご要望にもアイデアを持ってお答えできるように
といったニュアンスを込めました。

■ 使用スキル
  Webデザイン , WordPress , HTML5/CSS3 コーディング ,
  Javascript/jQuery , スマートフォン対応 , モバイル対応

■ 関連プロモーション
  Facebookページ, Twitter, Google+ページ, mixiページ

■ URL
  http://www.mulberden.com

これからもお客様の一助となれるよう、活動していきたいと思います。