コンテンツ10 サムネイル 4×3

contents-10-3840x3840

スマートフォンアプリ
ビジュアル再現

gridやflexboxのレイアウトで、スマートフォンアプリのような、人気サイトのようなアーカイブトップの表示を再現

スマホアプリ模倣のスタイルは、アーカイブトップと連動して関連ページでも

app_settings_alt

ビジュアル スタイルは6種類

ZOZOTOWN型スタイル、メルカリ型スタイル、Instagram型スタイル、およびYahooニュース/不動産紹介スタイル

スタンダード(標準型)スタイルは「ブログスタイル」、さらに「theブログ レガシースタイル」もあり

filter_6

(プチ)マテリアルデザイン

モバイルファーストは、スマートフォンで見る画面、Webページのデザインも徹底する必要があります
シンプル&メリハリ
これがキモです

マテリアルデザイン

iPhone登場からしばらくして、スマートフォンを意識したWebサイトや、スマホアプリでは「フラットデザイン」が浸透していきました
シンプル、のっぺり、大和絵のような遠近法無視で奥行きのないデザインですね
これが、最近のイラスト画像の主流のようです
これに対してGoogleは、少しだけ立体感を持たせる「マテリアル」のコンセプトを導入しています
シンプルな中でも、ドロップシャドーなどで、影を作って立体感をかもし出し、重要なポイント箇所を際立たせるということなのかなと
つまり、シンプル&メリハリ ですね

Google Material Iconのセルフホスト

別紙のGoogle Material Iconマニュアルで、人気アイコンの利用法を解説しています
また、アイコンのフォントファイルを外部参照していては、おそろしく重く遅くスピードダウンしてしまいます
それを解消し、デザインとスピードを両立するためには、Webサイトのサーバーにフォントファイルをアップロードして内部参照する、セルフホストが必須です

上記ライセンスに従ってGoogleフォント(Material Icon)を、テーマに同包しています

マテリアルカラー

そして、マテリアルデザインを補助するのが、シンプルでメリハリのあるカラー構成です
カラーセットを作り上げるポイントは

  • メインカラー:レッドやブルーのほぼ原色?
  • サブカラー:メインカラーより明度?が上(つまり薄く?)
  • ハイカラー:メインカラーより明度?が下(つまり濃く?)
  • アクセントカラー:メインからは色相環で離れた色

こういった感じでしょうか
今回のテーマでは、このマテリアルカラーの複数のパターンを、簡単に着せ替えできるようにしています

アバター

author-primary による

Algorism Inc. 株式会社アルゴリズム 代表取締役。SEO塾運営。このサイトは2023年新発売のWordPressテーマのショーケース