modainc

moda-inc.comサイトのホームページデザイン構築事例紹介

愛媛県松山市にある銀天街の中にあるzakka store[la・epice]から生まれたオリジナルの雑貨メーカーさんです。ジュームラ用超高機能自動オリジナルデザインフレームワーク「smartboot」をベースにワードプレスを組み合わせWebフォントプラグインを実装しています。スマートフォンでも最適化したレスポンシブデザインです。BtoB取引先専用エリアはSSL化し、運営管理を担当。
写真

moda-inc.com

担当:DESIGN / HTML / CSS / オリジナルウェブフォント実装 / 食品商品写真撮影 / JOOMLA自動テンプレート開発 / サイト構築 / 運営管理 etc..
CLIENT:moda-inc.com

moda-inc(もだ/ラ・エピセ)

デザインについて[ジュームラ3]

画像

トップページ。デザインがあふれているこの時代だからこそ 私たちの好きなモノ {昔から使われているような素朴でナチュラルなもの } を大切にしたい。

商品ひとつひとつが使い勝手やデザインにこだわりがあるブランドです。どこか懐かしい気持ちになるようなその雰囲気をウェブでどう伝えるかに尽力しました。紙や布の素材配置、イラストや写真にこだわっています。表示されているテキストはすべてオリジナルWebフォントで出力しています。

画像 果汁100%ジュースのページ。ホームページ上でイメージやデザインを決定付けるもっとも重要な要素が写真です。写真ひとつがサイトの印象を左右します。

デザイン設定管理画面

難しいウェブデザインはデザイン管理パネルで詳細に設定していきます。一般的にWebサイトのデザインはCSSやJavascript、HTMLやPHPなどによって専門職種のスキルを必要とします。さらにレスポンシブデザインやWebフォントの実装となると特殊なテクニックが不可欠ですが、このサイトでは一切コアソースには触れずにデザインできるようにしています。

画像

サイトを構成する要素は全て、メニューの文字やパネルの影も1PX単位でカラーパレットで色を作れます。

画像

テクスチャー素材などをアップロードしてホームページを飾れるようにしています。

紙のレイアウトを忠実に再現しより複雑で詳細なレイアウト構造をスマホでも自動配置/アイコンはWebフォント表示

写真

紙のカタログ

画像
スマホでの見え方。レイアウトは自動的に並べ替えられます。タイトルのアイコンはGIFなどの画像ではありません。スタッフさんの手描きイラストをウェブフォント化。アイコンはWebデザイナーが画像を書き出す一般的な方式では作業時間がかかります。テキストでただ一文字入力するだけです。
画像

雑貨ページ。レイアウトはすべてBootstrapのグリッド組。レスポンシブデザインというと同サイズグリッドの羅列が一般的でどこのサイトも似たように見えてしまいますが、Bootstrapのグリッドを複雑に入れ子状に組み合わせて、紙のデザインと同様のレイアウトを実現させました。

BLOGは最新ワードプレスでシンプルに構成/本文はオリジナルWebフォント

画像

BLOGページ。Bootstrap(ブートストラップ)でのHTML組はレスポンシブレイアウトを容易に実現するTwitter社のCSSフレームワークですがデザイン初心者やコーディングの苦手な方にとってはやや敷居が高いかもしれません。
主に簡単に手軽に更新できることを目的とし、最新Wordpressを採用。

オリジナルWebフォントはジュームラ内部に実装したものをワードプレス側で読み込み一元管理しています。画面両端にぴったりそろえてWebフォントを1行づつ表示させる見出し(slabText=プラグイン使用)などでも更新できるようになっています。

PCはWindows、OSXの全ブラウザ環境、i-Pad、i-Phoneなどのスマホ環境、アンドロイドなどほぼ100%のブラウザ環境で日本語Webフォントが適用されます。画像

商品の撮影も担当しています。自然光でデジカメで撮っています。

写真
ホームページに配置する写真イメージは大切です。商品を撮影しながらサイトのデザインを進行します。

moda-incのホームページを見る

moda-incのBLOGを見る

ログイン or 会員登録

登録前に「よくある質問サイト利用規約フォント利用規約ページを熟読ください。登録者は全ての規約に同意したものとみなします。

fontgraphic.jpからのメールを受信できる設定にしてから登録してください。