カスタマイズ性重視のシンプルカード型テーマ「KOALA」を公開しました

このページでは、当サイトのテーマ、「KOALA」の紹介をしていきます。

好評につき、オヨミヨからカード型デザインテーマ第2弾です。前回公開した「Comfort(コンフォート)」同様、多くの人に使っていただけると嬉しく思います。

KOALAの特徴

始めにコアラの特徴についてまとめます。

  1. カスタマイズに適したシンプルなカード型デザイン
  2. どのデバイスから見ても美しく表示されるレスポンシブデザイン
  3. 表示速度に配慮した、必要最低限のコーディング
  4. 使いやすく、簡単に設置できるスライドメニュー
  5. 背景色を使用した場合も美しく表示されるよう設定済み
  6. 関連記事はデフォルトでカード型

以上の点を詳しく解説していきます。

これまでカスタマイズ性を重視したシンプルなテーマは数多くありましたが、ガード型となると急に数が少なくなります。

カード型デザインでは、どうしても全ての情報をカードの上に収める必要があるため、テンプレートを作るとすると問題が多く発生してしまうのも頷けます。

実際私も試行錯誤しながら少しずつ作りました。予想よりかなりの時間を費やしてしまいましたが、結果的には自信を持ってお勧めできるテンプレートが完成したため全く後悔はしていません。

この記事を読んで、より多くの人が当テーマ「KOALA」に関心を持っていただけると嬉しいです。

カスタマイズ重視のシンプルなカード型デザイン

KOALAはカスタマイズ性重視です。

必要な部分はしっかりと作り込み、それ以外の部分はほぼデフォルトのまま残すといった形で作成しています。

例えば、見た目に大きく影響するカード型の記事リンクやサムネ付きエントリーなどは、レイアウトが崩れないようにしっかりと作り込む一方で、個人の好みに左右されやすい記事内の細かな設定など(見出し等)はデフォルトのまま残しています。

つまり、カスタマイズを加えないでも美しく表示されますが、別にカスタマイズを行いたい場合も、KOALA側の設定が干渉しないように工夫されています。

ちなみに、元となっているテンプレートは定番のBoilerplateです。

GitHub - hatena/Hatena-Blog-Theme-Boilerplate

どのデバイスでも美しい表示

KOALAはレスポンシブデザインテーマです。

今から実際の表示例を確認していきましょう。

PC表示

画面幅の広いデスクトップでは、以下のような表示になります。

f:id:oyomiyo:20180722195324p:plain

タブレット横

ざっくりとタブレットと言っていますが、実際には画面幅で切り替えているので画面の大きさによって表示は変化します。

一例として通常版のiPadを横に倒してみるとこの表示になります。

先程との違いはカラムの左右の余白の大きさです。画面幅が狭くなるにつれて周りの余白を削っていくことで、カラム自体の大きさを変えずに表示できるようにしています。

f:id:oyomiyo:20180722034358j:plain

タブレット縦

多くのテンプレートでは、タブレットの縦と横で表示が同じになっているものがほとんどです。実際にはかなりの横幅の違いがあるわけですから、縦と横で表示を変えてあげるのは親切でしょう。

この場合も画面幅で切り替えてあるため、必ずしもすべてのタブレットでこのような標示になるわけではありませんが、いずれにしてもちょうどいい幅で表示されるということには変わりがありません。

f:id:oyomiyo:20180722034749j:plain

この場合、サイドバーにあった表示が記事一覧の下に移動して2カラムで表示されるようになります。

以下は実際の表示例ですが、とてもすっきりしていて使いやすいと感じるはずです。(自画自賛…汗)

f:id:oyomiyo:20180722034807j:plain

小型タブレット、大型SP

ここからは1カラムになります。

ここら辺の設定を大雑把にしているために、一部のスマホ表示で間延びしたカードになったり、窮屈なデザインになってしまっているものをよく見かけます。これは非常にもったいなく感じます。

KOALAでは無難に1カラム表示に統一することで、窮屈で読みにくい表示にならないよう工夫しています。

f:id:oyomiyo:20180722034905j:plain

一方で、記事一覧したの表示も1カラムにすると、一部のデバイスでは非常に長いサムネ付きリンクが表示されてしまいます。(スマホを横倒しにしたときにこの表示になるのをよく見かけます。)

とても間延びしていてチープな印象を受けてしまいますから、記事一覧が1カラムになっても、比較的幅に余裕がある場合は記事下は2カラムのままで表示します。

 

f:id:oyomiyo:20180722034936j:plain

残念ながら「はてなブログ」に限らず、ここら辺の細かい設定をしていないテーマは多いです。

勿論そのようなテーマが悪いというわけではありませんが、ヘッダーやメニューの見易さにはこだわっているにも関わらず、それ以外の部分でブログの印象を下げてしまうのは非常に残念です。

記事が1カラムならそれ以外も1カラムと、画面幅に応じて固定してしまうのではなく、画面幅とコンテンツの大きさを考慮した上でカラム数を決定してあげた方が読み手にとって親切でしょう。

SP表示

一般的なスマホ全般の表示はこのようになります。

f:id:oyomiyo:20180722034957j:plain

この場合は、記事下の部分もすべてワンカラムで表示します。

f:id:oyomiyo:20180722035004j:plain

 

軽い動作性

KOALAはカード型デザインですので、その他のシンプルなテンプレートに比べコーディングの量はそれなりに多くなってしまいます。

そのため表示速度が速いですとは大声で言えないのですが、必要最低限のコーディングにとどめているという意味では比較的動作は軽いでしょう。

またKOALAでは、スマホ表示の際に、スライドメニューを少し動かしてあげることで、スライドできることに自然に気づくよう工夫しています。

f:id:oyomiyo:20180723160924g:plain

このような動きもJavaScriptのような読み込みを遅くする可能性のあるものは使わずに、CSSだけで実装しているので安心です。

使いやすいスライドメニュー

少し取り上げましたが、KOALAではスライドメニューを採用しています。 

テーマ導入後に少し設定するだけで簡単に設置できるよう、別記事にて詳しく説明しています。

また「KOALA」に限らず使えるテクニックも紹介しているので目を通していただけると嬉しいです。

私がスライドメニューにこだわる理由としては、場所を取らないためデザインにも干渉せず、ユーザビリティ的にも他と劣らないからです。

もとより大企業などのホームページなどではない限り、使いにくいと感じることは恐らくないでしょう。

いずれにしても不要な場合は設置しなければいい話ですから、この場でスライドメニューのスバラシサを熱弁する必要はないかもしれません。汗

背景色に配慮したデザイン

はてなユーザーの方のブログを拝見していると、少なからず背景色(背景画像)を設定している方がおられます。

さらにカード型デザインとなると、通常よりも背景色を設定して使う可能性が高くなると予想しています。

そのため、特にKOALAユーザーが設定をしなくてもデフォルトのままで美しく表示されるようあらかじめ設定しておくのは親切でしょう。

ちなみにKOALAの場合、背景色(下画像は背景画像を設定)を設定するとこのような標示になります。

f:id:oyomiyo:20180726013758p:plain

記事ページはこのような感じです。

f:id:oyomiyo:20180726013848p:plain

はてなのデフォルト機能で、背景色や背景画像を設置できるようになっているのでそれを使うと秒で設定できます。

参考までにタブレット表示も載せておきます。

f:id:oyomiyo:20180726014030j:plain

記事ページです。

f:id:oyomiyo:20180726014051j:plain

背景画像の色と記事の背景色が似ているので見にくいですね…すみません泣。

最後に記事下のサムネ付き記事リンクです。

f:id:oyomiyo:20180726014056j:plain

背景色がない場合よりもカード感がでていていい感じではないでしょうか?

デフォルトでは背景色は白ですが、設定した場合でも美しく表示されるようになっていますよという紹介でした。

特にはてなテーマストアにあるものは背景色などを設定した場合のことを想定せずに作ったのでは?と感じるものが多い印象です。

ウェブデザインの知識がある方ならまだしも、細かい設定をユーザーに投げるのはメンドクサイ上に疲れるのは想像がつきます。

たとえシンプルなテーマを売りにする以上ユーザー側の設定もなるべくシンプルで済むようにしておきたいものです。

関連記事もカード型

はてなブログでは、デフォルト機能で記事下に関連記事を表示することができます。KOALAでは、ユーザー側が「記事下に関連記事を表示する」を設定にした時点でこの表示になるよう設定しておきました。

f:id:oyomiyo:20180727180628p:plain

それ以外の記事リンクも画像とタイトルのシンプルなデザインで統一していたので、関連記事に関しても同じようなスタイルにしました。

サイトの印象を統一するという面でもメリットではないかと思います。

参考までにワンカラムの場合と、

f:id:oyomiyo:20180727180429j:plain

スマホ表示の場合です。

f:id:oyomiyo:20180727180433j:plain

気に入ってもらえると嬉しいです。

まとめ

私自身デザインに関してはこだわりが強いほうですので、どうでもいい設定に多くの時間をかけてしまうということが度々ありました。

本来コンテンツに時間をかけて作り込むべきなのは分かっていても、どうしてもデザインの方に重きを置いてしまうという人は多いはずです。絶対…。(圧力)

それで、ブログデザインの知識がない人でもなるべく短時間で効率よくカスタマイズできるように、KOALAのカスタマイズ記事も今後増やしていく予定です。

別の方がKOALAを取り上げてくださり、カスタマイズ記事が増えてくれることも若干期待しています。(笑)

KOALAを導入した後の初期設定とまずしてほしいことを説明していく

それでは。