10.MEFILAS#1日1サイトレビュー

MEFILAS｜Web制作会社

【概要・サービス内容】
デザイン製作所としての理念、作品を紹介する　

【ターゲット層】
質感のあるWEBコンテンツ、サイトを作ってもらいたいクライアント　

【ファーストビュー】
圧倒的ミニマリズム。トップは「MEFILAS」のロゴとハンバーガーメニュー、色合いも白黒基調ですっきりしている
余計な肉を削ぎ落とした洗練さに惹かれてクリックしてしまう

【全体的な印象】
スクロールすると”What We can do : “のセクションに、これはそれぞれ重視するデザインの「要素」を羅列しており、本来は13-16px程度にするであろうpタグをなんと破格の48pxで展開。当然、ブラウザの画面全体にh2・pタグのみ映るというWEBサイトとしてはあまり見ない構成になっている。

これらの「要素」にマウスをホバーすると各々を象徴するモーション・グラフィックが出現する。とても斬新な発想で、思わず全ての「要素」の映像を視聴してしまった。

ページ下部で作品を紹介。ここまでページを見た段階ですでに「質感のある、斬新」というワードがユーザーの脳裏に浮かんでおり、自然と「この会社の作る作品も上質で斬新なものばかりなのだろう」と思える。

【サイト全体の構成（主なID/クラス名や状態）】

・header(fixed) + Top（#Header）

・What we can do :（#Vision）

・Our work front :（#Vision）
・What we value :（#Vision）
・Information :（#Info）
・Works :（#Works）
・Service :（#Services）
・Contact :（#Contact）
・footer :（#Footer）

【カラー】

【フォント】
en : DINNextLTPro-Condensed - 400
漢字 : "FOT-マティス Pro M"; sans-serif
ひらがな・カタカナ : "FOT-筑紫ゴシック Pr5 R"; sans-serif

コンテンツ部分は「漢字」と「ひらがな・カタカナ」でフォントを使い分けている



【レスポンシブ】
header(42px)→24pxに
p(48px)→18.07px(font-size:139%; bodyに設定している13pxの139%)
h2(54px)→24.95px(font-size:185%; bodyに設定している13pxの185%)
footer(13px)→ママ