いやー長かった…

去年の年末くらいから構想を練り始めて、この前の週末にようやくリリース。7ヶ月ほどかかってしまいましたが、なんとかリリースまでたどり着けました…

普段いろんなWebサイトを見ていて、ある程度「自分がどういうレイアウトだと使いやすいと感じるか」というのが分かってきたので、それをデザインしてみる、というのがコンセプトです。完全に自分仕様です。

そんな完全自分仕様のテーマについて、つらつらと書いていきます。

スターターテーマ “_s” をベースに構築

とりあえずwordpressテーマとして必要最低限なものが揃っているだけ、というのがスターターテーマ。どうやらいろいろとあるようですが、僕が使うことにしたのはwordpress.com運営母体でもあるAutomattic社の_s (アンダースコアエス)というテーマです。おそらくスターターテーマに関する日本語の情報はほぼ_s関連なんじゃないかってくらい有名なやつで、ちょっと検索するとヒントがたくさん出てきます。これはありがたい。

ダウンロードする際の仕掛けが少し気の利いた感じになっていて面白いです。例えばサイト名とかサイトの説明とかを書く欄があって、書いてからダウンロードするとテーマにその情報が反映されています。他にも、Sassifyボタンにチェック入れてからダウンロードすると、Sass(SCSS)対応した状態になっている、とかも地味に便利。ありがたい。

目に優しい黒背景デザイン

最近いろいろなアプリやWebサービスで「ダークモード」が導入されていて、疲れ目対策が進んでいますね。僕もTwitter、ニュースアプリ、Feedlyなどなど、ダークモード搭載サービスは全てダークモードに設定しています。そんなわけで、今回のブログデザインを考え始めた時から黒背景でいこうって決めていました。

黒背景にしたときに悩みどころだったのは、黒以外に何の色を使うか？ってところ。白背景よりも色の使い方が難しい気がします。結局、背景は黒、コンテンツの背景は暗いグレー、リンクは過ごし明るいグレー、など、色を使わずグレースケールで構成するってことで落ち着きました。ここは今後変わるかもしれません。

メニューの位置を端末によって変える

ナビゲーションメニューの位置は、デスクトップでは横に、モバイルでは下にくるようにしてみました。メニューがデバイスに依らず上にあると不都合が多いというか、例えばPCの画面は横長だから縦は広く使いたいですし、スマホではメニューが上にあると「指届かねーよ！」ってストレスになっちゃうので、そういう不都合が解消されるようなテーマ作りをこころがけました。

まだデザインしきれていないところもあって、例えばPCだけどフルスクリーンで見ないとき(幅が960px未満)は、メニューが横だとメインコンテンツの幅が狭くなっちゃうので上にしています。PCだとメニューは下より上のほうが使いやすいだろうと思ってそうしていますが、モバイル用デザインとナビゲーション位置が真逆なのでデザインに一貫性が無いような気もしていて、今でも悩んでいます。これについては、ボタンを押すと左からメニューが現れる、いわゆるドロワーメニューに今後変えるかもしれません。

他にもちょいちょいありますが、とりあえずこのまま運用しつつのんびりバージョンアップしていけたら、と思っています。