こんにちは、たかじょー（@takajozland）です。
見ていただくとわかる通り、デザインを一新しました！
やったこととかまとめておきます。
なぜデザインを変えようと思ったのか
理由は大きく２つあります。
- 白を基調にしたデザインにしたかったこと
- フォントを一新したかったこと
これに加えて、「なんとなくオシャレにしたい」という曖昧な要望を持ってスタートしました。
で、いま見ていただいているデザインがそうなんですがいかがですか？
まあいろいろ妥協してしまった部分はあるんですが、自分のなかでは最低限のイメージを実現できたかなーという感じです。
今までのテーマ
さて今までお世話になったテーマをご紹介しましょう。
orefolderさんのZeno-TEALです。
このテーマめっちゃかっこいいんです！
トップページのカードっぽいところとか、全体の色の統一感とか、見出しのマークとか。
全てがかっこいいんです。
「じゃあそれ使ってればいいじゃん！」
ってツッコミはわかってますw
でもかっこいいからこそ人気なんですよ！人気ってことは人と被ってしまうんですね。
いろんな人のブログを見て来ましたが、結構な確率で遭遇しますw
ブログやってるからには自分の個性を届けたいって思いはやっぱりあるんですよ。
ってことで今回Zeno-TEALからの卒業を考えたわけです。
新しく使用させていただくテーマ
これからお世話になるテーマがこちら。
シロマ (id:shiromatakumi)さんのSOHOです。
このSOHOはぼくが最初にいった以下の２つを見事に満たしてくれています。
- 白を基調にしたデザインにしたかった
- フォントを一新したかった
ちょっと前にBlankで考えると言ってた記事があるんですが、SOHOに変更した理由はフォントの綺麗さや全体の雰囲気でした。
h2見出しの上のちょっとしたマージンや、リンクの色が目立ってるようで目立っていないところとか、作った方のシロマさんのセンスを感じます！
細かいところのデザイン変更
SOHO関連
SOHOはシロマさんがたくさんの専用カスタマイズを用意してくれています。
それの中から自分が欲しいと思ったカスタマイズを適用していきました。
テーマの作者の方が、用意してくれているカスタマイズはそのテーマにあったデザインに仕上げていただいているので間違いないですね！
シェアボタンの設置
いまのブログに必須となっているシェアボタン。
SOHO用のものも用意していただいています。アイコンが黒地に白抜きなのでデザインとしては最高ですね！
タイトル下のグローバルナビゲーション
過去の記事を見てもらうための大事な導線のグロナビ。
あえて英語にしてちょっとオシャレ感を出しました笑
ただ、コンテンツとしては少ないので今後増やす予定。
Follow Me
今まで作っていなかったフォローミーも新設。
SOHO作者のシロマさんがすばらしいツールを用意してくれてるのでこちらを使わせてもらって作りました。
こういうWebツールを用意していただけるとカスタマイズがしやすくていいですよね！
ぼくも試しに作ってみようかな。
その他
Checkのリンク
簡単にいうとこれ↓
実は今回のデザイン変更の隠れテーマのうちの一つが、このリンクをもっと目立たせたいというところでした。
はてなブログみてるといろんな人がつかってますよね。これはまじでみやすくなる。
カエレバ
カエレバリンクのカスタマイズも入れておいた。
Zeno-TEAL時代からの変更はないけど、白を基調にしつつリンクに少し色がはいってていい感じにオシャレ。
気に入ったらフォローしてください
これもZeno-TEAL時代から変更なし。
記事しただし、黒がメインになってるからデザインの景観は損なうことがないと思う。
ページトップへ戻るボタン
これは簡単にできそうなのでやってみた。
ページスクロールで出現するけど、常に出しておいてもいいかなと思ってる。
今後、要調整かな。
やり残し
今回はできなかったけど、いずれやっておこうと思うものを一応書いておきます。
トップページをもっと見やすくしたい
これが一番のくいの残るところ。一覧化ははてなブログで標準機能になったんですが、それだけだと見辛い。
PCはある程度いいんだけど、スマホが壊滅的に見辛い。これは絶対に直したい。
でもぼくにはその力がないので有識者の人たちがやってくれるのを待つスタイルにする笑
つばさのーとさんのトップページがかなりいい、特にスマホ版。
スマホ版をパク、参考にさせていただこうとおもってCSS見てみたけどなんのこっちゃー。
数時間格闘した結果断念した笑
ボールドを蛍光ペン化
これはかなり迷ってるところ。
ボールド全てを蛍光ペンにすると、白を基調としたデザインの邪魔になってしまうんじゃないか。という懸念あるんです。
なので新しいクラスで実装するか、今まで使っていなかったイタリックに蛍光ペン要素を追加しようかなと思ってます。
まとめ：スッキリしていい感じ！
という感じでデザインを一新してみましたがどうですか？
自分のなかではうまくまとめることができたんじゃないかなーとおもいました。
あと、デザイン変更の試行錯誤中のツイート
Webディレクターやってた時の話
— たかじょー@はてなブログ (@takajozland) 2017年10月21日
「ここは、あのサイトを真似てこういう感じにしておいて」
「もっとここをさ、こういう感じなんだよ。時間かかりすぎじゃね？」
とかいろいろと言ったけど、自分でやるとこんなにも大変だったのか。
当時のデザイナーさんよ、ごめん。
これはかなりの反省点、自分で手を動かさないとわからないことってあるもんですねー
最後まで読んでいただき、ありがとうございました～
