昨年、多機能でカスタマイズ性に優れた「ZELOシリーズ」を制作しましたが、今回の「veta」のコンセプトはそれとほぼ対極に位置するものです。
vetaのコンセプト・特徴・ダウンロードなどについてまとめていきます。
vetaのコンセプト
vetaは、従来のブログの概念をふっとばすために作りました。近年はyoutubeやtictoc、noteなど様々なメディアが台頭しています。そうした中で、文字だけの野暮ったいブログというメディアは若者から遠い存在になりつつあるように感じます。
ブログから野暮ったさを取り除き、現代の空気感にあう存在にしたい。さらにはBloggerとかいう異形の存在をうまく生かしたものにしたい。
もう一つ。2018年〜2019年にかけてやたら副業が流行っていましたが、その中で感じたことがあります。
それは、ブログと言うものがとても重く捉えられてしまっていること。なので、もっと力を抜いて自然にアウトプットできる場所を作りたい。
手元にある紙に雑多なメモをするかのような手軽さと、仲介を挟まない個人の純粋なプラットフォームとしての場を用意したい。
そんな思いを込めて、vetaを制作しました。
vetaの特徴
UIフレームワークVuetifyを使用
UIフレームワーク「Vuetify」を使用しています。https://vuetifyjs.com/ja/
Vuetifyは、美しく手作りされたマテリアルコンポーネントを備えたVue UIライブラリです。設計スキルは必要ありません—素晴らしいアプリケーションを作成するために必要なものはすべて手元にあります。(Vuetify公式サイトより)
Vuetifyを用いることで、比較的簡単に洗練された見た目にすることができました。
Bootstrapなど他のUIフレームワークと比べるとVuetifyはややオーバースペックかもしれませんが、UIの素晴らしさは別格です。
また、Vuetifyを使うことにより、サーバーサイドレンダリング(SSR)が実行されます。
簡単に言うとサーバー側でHTMLを生成してくれる機能のことで、あなたのサイトに誰かがアクセスした時、SSRしない場合と比べて表示に若干時間がかかる代わりに、パッとページを表示してくれます。
CSSの適用を、サイトを閲覧する側で行うのか、サーバー側で行うのかの違いって感じです。
カラー
Vuetifyを使ったことで通常のライトカラーとダークカラーの2種類を作ることができました。
「veta」と「dark-veta」という2つのテーマファイルです。好みに合わせてライトサイドもしくはダークサイドになることができます。
ちなみに2019年12月20日は「Star Wars エピソード9」の公開日です。
完全レスポンシブ
Vuetifyを使っているので当たり前ですが、一応こちらをご覧ください。様々な端末のサイズでサイトを表示してくれる便利なやつです。
http://www.responsinator.com/?url=https%3A%2F%2Fwww.mooovelog.com%2F
完全レスポンシブであることに加え、影のエフェクトや動的なアクションがかなりはまっていると思います。
完全レスポンシブであることに加え、影のエフェクトや動的なアクションがかなりはまっていると思います。
無駄を削ぎ落とし、現代に合わせたスタイル
Bloggerには、挙動が安定しない機能がいくつかあります。コメント機能や番号付きページネーションはその代表例であるため、vetaではこれらを採用していません。
また、現代に合わせたスタイルとなるよう、VuetifyとBloggerの細かい調整を行いました。
ガジェットとデザイン
ガジェットは「ブログ内検索」、「自己紹介」、「タグ(ラベル)」、「人気の投稿」の4つを用意しました。
Orange ZELO、Prime ZELOではトップ画面と記事画面で使用するガジェットを使い分けることができたり自由にガジェットを配置・削除できるなどかなり自由な設定ができるようにしていました。
今回のvetaでは、自分の経験から本当に必要だと思うガジェットのみを厳選し、最適なデザインになるよう調整しました。
特に「ブログ内検索」のウィジェットはVuetifyの良さを活かすことができ、かなり現代的なUIにすることができました。
また、BloggerにはWordPressのようなカテゴリー設定はできませんが、ラベル機能と言うものがあったため、インスタグラムなどで使用されている「ハッシュタグ」の概念を取り入れて表示するようにしてみました。
読み込み速度(SEO)
Google speed insightsを使用したページ読み込み速度検証結果です。https://developers.google.com/speed/pagespeed/insights/?hl=JA
モバイルにおける測定結果。
PCにおける測定結果。
モバイルの方ではやや遅い結果となりましたが、オーバースペックなVuetifyを読み込んでいるわりには頑張っている方ではないでしょうか。
構造化データ(SEO)
続いて、google構造化テストツールを使用した検証結果です。構造化データ テストツール
トップ画面の結果。
記事ページの結果。
オールグリーンです。
カスタマイズについて
カスタマイズは「veta」、「dark-veta」の二種があること以外特に想定していません。基本は現状のまま使用していただく形になります。文字の色や背景色を自由に変えられるテーマを使いたい方は「Orange ZELO」、「Prime ZELO」をご覧ください。
Bloggerテーマセット【Orange ZELO】・【Prime ZELO】｜ひろ /｜note
まあHTMLとかCSSについて知識がある方は自由にカスタマイズできると思うので、お好きなようにいじってください。
googleアドセンスについて
アドセンスについてはvetaのコンセプトを反映し、個別に貼れる場所の設定は特にしていません。広告を否定するつもりは全くないし私も広告による収益はもちろん欲しいのですが、アドセンスに固執してしまうことこそブログを重く捉えさせている要因の一つなのかな、と思ったからです。
それに最近のgoogleアドセンスは自動広告が優秀なので、細かくいじらなくてもうまいようにやってくれるはずです。
なので、アドセンスをつけたい場合は自動広告用のコードを貼り付けてください。
環境について
macOS Mojaveバージョン10.14のChrome、safariでは問題ありません。
その他 IE11、firefoxにおいても対応していることは確認できましたが、環境によっては表示できないことも想定されるので、お使いの環境でご確認ください。
veta使用上の注意点
Bloggerの「レイアウト機能」が使えません。Bloggerの設定画面からレイアウトを開くとこのような表示になってしまいます。
これはSSRによるものと推察しており、これによる影響は現在のところ特にありません。
また、JavaScriptのコードは新しく追加しないことをおすすめします。SSRにより、挙動が安定しなくなることがあります。
詳しくはこちらをご覧ください。
ダウンロード
ダウンロードはこちら。noteもしくはgithubからダウンロードすることができます。note: https://note.com/hiro00/n/n0aa14ffa44f2
github: https://github.com/t-aka-hiro/veta
リンク先に書かれている注意事項や規約をよく読んでから使ってください。
それと、このテーマを他人が嫌がること、社会の不利益となるようなこと、公共の福祉に反するようなことには絶対にしないでください。
