ブログのエントリーのデザインとSetRendered機能について

これは、 a-blog cms Advent Calendar 2015 の2日目の記事です。a-blog cmsの新しいブログのテーマに関して次はどんなものが必要か妄想したいと思います。

最近クライアントワークをしていて感じるのが、以前であれば1000px弱ぐらいを横幅の最大としてデザインをその中に納めて画面の設計をしていたのですが、フルスクリーンサイズで見ても成立するデザインをクライアントから求められるようになりました。また1カラムレイアウトのサイトデザインをすることも増えてきたのですが、その中で利用する1カラムデザインにあうエントリーのデザインについても工夫が必要と感じております。今回はブログのエントリーのデザインについて、英語は不慣れですが海外サイトを見ながら考えたいと思います。(追記:参考サイトはPCでご覧ください。スマホでは以下で説明している形では表示されておりません。)

横幅いっぱいの画像

Mediumの画像の見せ方 がわかりやすいと思うのですが、タイトル背景の画像や本文中の画像をレイアウトの選択方法によっては横幅100%になるレイアウトをしています。タイトル部分だけ大きく見せるパターンもHappy Cogのサイトの見せ方本文部分の最大が700px程度の固定でもヘッダーとフッターとで間が持つ印象があります。


タイトル背景や本文中の画像が100%のレイアウト

タイトル背景や本文中の画像が100%のレイアウト

タイトル背景が大きいレイアウト

タイトル背景が大きいレイアウト

段落のグリッドに変化を持たせる

The Great Discontentの見せ方Ochreの見せ方では画像のキャプションや段落のレイアウトを工夫をしてあたかも雑誌を見ているような雰囲気を出しています。本文が1カラムの場合でも段落に変化を持たせることで単調にならないような工夫がされている印象を受けました。


段組のレイアウトの変化

段組のレイアウトの変化


左側をタイトルリストに

厳密には1カラムではないのかもしれませんが1カラムのサイトにマッチする見せ方として、メールアプリっぽいタイトルリストを左側に固定する見せ方も良いなと思います。Subtraction.comMike Bloombergなどが上手く見せていました。


左側をタイトルリストのレイアウト

左側をタイトルリストのレイアウト


サブカラムを固定

他にサブカラムの使い方としてあまり情報を入れずに固定をする見せ方もありました。Fantasy OffsiteInside Intercomなどがタイトル画像や広告バナーを固定にしていました。


広告バナーを固定

広告バナーを固定


新しいa-blog cms2.6のSetRendered機能

先日の合宿で次期バージョンの2.6の紹介があったのですが、新しい機能としてSetRenderedという機能が追加されます。今までモジュール内でしかそのモジュールに属する値を出力できなかったのですが、このSetRenderedを使うと解決後のテンプレートを変数化して、好きな場所に表示することができます。例えば今までヒーローエリアにカスタムフィールドで登録した背景画像とタイトル日付を出して、トピックパスを挟んで、本文というレイアウトをしようと思った時には、ヒーローエリアと本文とでモジュールを2つ利用しないと実装できませんでしたが、これが1つのモジュールで実装できるようになります。

今後テンプレートの作り方が少し変わると思いますので、新しいブログのテーマではより自由度の上がったデザインが実装できるのではないかとワクワクしております。


カテゴリー

yamada takuo

有限会社アップルップル デザイナー

カメラと自転車と本屋が好きです。愛知県岡崎市在住。