記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

TOP

CATEGORY

SERVICE

フラットデザイン&レスポンシブ対応のCSSフレームワーク『Pure』

フラットデザイン&レスポンシブ対応のCSSフレームワーク『Pure』

Pureの画像

今年秋にリリースされるAppleの新しいOS、「iOS7」でも採用され、最近話題の「フラットデザイン」

必要最小限のシンプルな装飾で、製品のメッセージやアイデアをダイレクトに伝えることができるデザインです。

もともとスマートフォンなどの小さな画面でも、ユーザーを迷わせる事のないように不要なものをなくし、シンプルなデザインを元に生まれたものなのですが、Windows8でも採用されている「Modern UI」、Googleなどの大手IT企業が次々に採用しています。

今回ご紹介するのは米Yahoo!が提供しているレスポンシブWebデザイン対応のCSSフレームワーク、『Pure』

Pureは軽量で機能はあまり多くありませんが、ガチガチなテンプレートではなく、必要な箇所を選んで自分なりに自由にカスタマイズすることができるのが特徴です。

フォーム

フォームのフレームワークの画像

シンプルなフォームから、複雑な問合せフォームなどまで様々なテンプレートが用意されています。

フラットデザインなボタン

フラットデザインなボタンの画像

こちらはボタン類。単色系のボタンから、フラットな色合いのボタン、アイコン付きのボタンなどがあります。

表(テーブル)

表組みの画像

テーブルは通常の枠組みが用意されていました。

グローバルメニュー類

グローバルメニューの画像

横並び(Horizontal)、縦並び(Vertical)、ドロップダウンなどのメニューがあります。どのデザインも至ってシンプルでカスタマイズもしやすい構造になっています。

レウアウト

レイアウトの画像

サンプルのレイアウトも用意されており、もちろんレスポンシブWebデザインにも対応しています。「メール風」「ブログ風」などの比較的構築が難しいものもこれらを元に簡単に作ることができそうです。

Pure

終わりに

大手が採用し始めたことにより世界的な潮流はフラットデザインへと傾いてきていますが、そのフラットデザインと対をなすskeuomorphism(実写的なデザイン)との間ではまだまだ議論がされています。

ECサイトの場合、サイト全体がシンプルすぎると購入の決め手にもなる「情報量」が少なくなり、購入率などにも大きく影響を与える可能性があります。

上手くバランスを取りながら、ユーザーが安心して選びやすく買いやすいサイト作りを心がけましょう。

参考:フラットデザインの参考にしたいツール3種と事例5つ

上林

                   
クラウドECのサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
         

レスポンシブWebデザインカテゴリの最新記事