はてなブログで"最先端"なデザインのカスタマイズが出来たかもしれない
どうも、オークニです。
この度ブログのデザインをびっくりするくらい変更いたしました。その作業たるや、びっくりするくらいしんどすｗ
今回のデザイン変更に関して意識したことや、そもそも何で変更することになったのか？最先端てなんぞや？などなどをお話できればと思います。
なぜブログデザインを変更したか？
既存のデザイン
まず、既存のオークニズムを知らない人のために今までデザインを改めて確認しましょう。
こちらが、PCでのデザインですね。
そうです。もう、誰がどう見ても…
SANGOやん
です。
WordPressの超人気有料テーマ「SANGO」。超人気ブログの「サルワカ」の中の人が作ったことでも有名で、これを、倫理的に考えて
どうかしてるぜ！
ってレベルではてなブログでパクり倒したのが当ブログ。オークニズムでした。
突然のバズからのご本人登場
ところで先日の記事、「うわっ…はてなブログ、読みにくすぎ…！」最大の原因はコレ。これが、まさかのまさかのSmartNewsデビュー。（「はてなブログ」カテゴリーにて）
しかもアイキャッチとタイトルがCTR（クリック率）を押し上げ、一気にファーストビューでの掲載。
リアルタイムPVが100に達し、当日のPVが6,000以上。運営開始2ヶ月目にしてこの快挙、「最高かよ」と思っていた束の間…
露出の拡大とともにSANGOパクりの害悪ブログ認知も広まっていく。
文字サイズ本文は16pxは欲しいところ。ただこのブログのletter-spacing: 1.3px;はちょっと読み辛いです。あとあからさまにSANGO・サルワカさんのサイトのパクリ（オマージュ？）デザインは大丈夫ですか？/「うわっ…はてなブログ、読みにくすぎ…！」最大の原因はコレ https://t.co/lmkIilevEr
— minimalgreen (@minimalgreen00) 2018年2月13日
そしておそらく👆このツイートをきっかけに、
SANGO制作者&サルワカの管理人です。
— CatNose (@blogliterally) 2018年2月15日
すみませんが、こういう系の記事やめて頂けませんか？
＼ご本人登場／
はい。やめます。
ご迷惑おかけして申し訳ございませんでしたm(_ _)m
その後、ご本人からDMまで頂き、誠心誠意対応させて頂きました。最終的に、こんなパクりクソ野郎をフォローまでして頂き、泣きました。
ここで改めて周知するまでもありませんが、サルワカさんは神です。ただのサルではありません。（そもそも”サルでもわかる”の”サル”だから、ご本人にサルの要素はゼロ😂）
そんな神ワカさんを、いつまでも冒涜するようなことはできようか？
いやできない。
ということで、ブログデザインの変更に至りました。
神ワカさんからは、「ブログのデザインに関しては問題ない」とまで言って頂いたのですが、もーなんか勢いで「変えます」って言っちゃいました。
逆にきっかけを頂きありがとうございますm(_ _)m
新しいデザインで意識したこと
やっと本題ですｗ
さて、新しいデザインではいったい何を意識したのか？一言で申し上げると
最先端です。
フレッシュさ。目新しい感じ。とくに全体的なノリとしては「はてなブログでの最先端」というところに重きを置きました。
まず、この記事ページが新デザインの初めての接触だという人のために、既存デザインと同様トップページの全体図をスクショしておきます。
どうですか？最先端ですか？
個人的にはそこそこ先端な気が、するようなしないような…何とも言えない感じですね！ｗ
最先端なデザインのポイント
その１、全く無名の新着テーマを使用
僕は前まで、はてなブログでも人気テーマのひとつ「ZENO-TEAL」を改造して、SANGOパクりデザインをしていました。
元々、ZENO-TEAL自体が人気WordPressの「STORK」をパクったデザインだったので、カード型レイアウトとしては親和性が高く、使い勝手が良かったです。
で、今回採用したテーマがこちら
「Coffee Break」
なにこれ？！
写真ブログ向けのテーマです。
シンプルな構成で、飽きのこないテーマを…目指しています。
テーマの説明、たったの2行ｗｗｗ
何より、公開日が2018年2月1日。めちゃめちゃ最新！インストール数40件！利用中のブログ、制作者も含めてたったの8人！
これは、”最先端”の皮切りに使うしかないｗ
たこさんちゃんねるさん、ありがとうございますm(_ _)m
その２、メインカラーにグラデーション
2018年のwebデザイントレンドのひとつ、グラデーションです。しかもバッチリ。
グラデーションは薄っすらが正義。みたいに考えている人もいるようですが、トレンドは逆です。入れるなら、バッチリ鮮やかにグラデーションさせましょう。
レイアウト的には、あくまでもフラットやマテリアルをベースとしたシンプルデザイン。その中で、アクセントとしてグラデーションを取り入れることで、全体として"さらに"スッキリまとまったデザインとなります。
おそらく、はてなブログでここまでグラデーションを効かせたデザインのブログは他にないでしょう。まさに最先端。
その３、斜め線
カード型レイアウト。マテリアルデザイン。1カラム。どれもこれもトレンディなようで、今となっては見慣れたデザインばかりですね。。。
そんな時に、ちょっと斬新さを加えるアイデアとして昨今トレンドなのが、この斜め線です。
記事一覧や関連記事、全てのサムネイルを斜めにちょん切ってます。加えて、記事下やフッターに関しては、今度は逆方向にエリアごと斜めにちょん切ってます。
これまで見慣れた単調なデザインが、この斜めちょん切りだけで一気に目新しさが出てきます。まさに最先端。
その４、カード型インフィード広告
僕がカード型を好む理由の１つに、記事一覧の中にインフィード広告がいい感じに馴染んでくれるってゆーのがありました。（とくにスマホ）
ただ…はてなブログでカード型レイアウトを採用してる多くのブログで、インフィード広告を突っ込んでる事例をほぼ見ません。
なぜか？
たぶんカード型筆頭テーマ「ZENO-TEAL」じゃ実装できないからです。
「ZENO-TEAL」のカード型というのは、はてなブログが「一覧形式」のトップページを発表する前に作られたテーマです。
元々「全文形式」のところをCSSで無理やりカード型に整形されたカタチ。つまり、見かけ上は「一覧形式」だが、中身は「全文形式」です。
これが影響しているのかは定かではないのですが、僕もZENO-TEALで試してみたところ、記事一覧にインフィード広告を挿入することが出来なかった。
そして、挿入しているブログも見たことがない。製作者のc-miyaさん、もし出来るなら教えてください。たぶん、やりたい人いっぱいいると思いますｗ
さて、リニューアルしたオークニズムはどうでしょう？トップページをご覧ください。バッチリ記事一覧にインフィード広告挿してます。しかも絶妙にインフィードしまくりです。まさに最先端。
まとめ
そろそろ3000文字を超えてるので締めますｗ
その他にも、非対称レイアウトやズラし被せ配置、でかフォントなど細かい最先端ポイントは散りばめており、さらに今なおカスタマイズ中といった状況です。
あんまり汎用性がないので、真似したい人がいるか分かりませんが…ご要望があればこのブログで採用しているカスタマイズの記事とかも書こうと思います！
さいごに
今回、僕にリニューアルのきっかけとチャンスを与えて下さった最大のキーマン、サルワカ様。
初代オークニズムのデザインの基礎。はてなブログのカード型レイアウト最大の功労者、FOXISM様。
絶妙なタイミングで絶妙な新テーマを制作してくださったたこさんちゃんねる様。
改めて、ここに感謝申し上げます。
ありがとうございましたm(_ _)m
webデザイントレンド参考記事：
2018年に流行しそうな、注目Webデザイントレンド20個を大予想 - PhotoshopVIP
2018年はこれで決まり！Webデザインの最新トレンドまとめ | Web Design Trends
2018年のメインストリームになる？注目のWebデザイントレンド5選｜ferret [フェレット]
