starnote*
Menu
  • Home
  • About
    • About this site
    • About the author
    • Contact
  • Travel
  • Photo
  • Gadget
    • Apple
      • Mac
      • iPhone
      • iPad
    • Sony
    • Camera
    • Android
  • Goods
  • Academic
    • My Research
    • Doctor Course
    • Pharmacist
  • Lifestyle
    • Essay
    • Column
    • House
    • Blog
    • Music
Series
2018年まとめ 2019年まとめ 2020年まとめ BATTABI BRUNO CX-5 Featured FUJINON XF18-55mmF2.8-4 R LM OIS FUJINON XF23mmF2 R WR iPhone 12 Pro Max My Research Panasonic Cuble PRESSo Recommendation SIGMA 24-70mm F2.8 DG DN Art Sony A7III Super Takumar 55mm F1.8 X-T200 すたのじん ゆるゆる名古屋旅 わたしたちと鎌倉 アメリカと薬学 年末まとめ 週末台湾 長崎ランタンフェスティバル2019
Categories
  • Academic
    • My Research
  • Android
    • dtab
  • App
    • iOS App
    • Mac App
    • Web App
  • Apple
    • Apple Music
    • iPad
    • iPhone
    • Mac
  • Blog
    • Adsense / Affiliate
    • Blog Design
    • Weekly / Monthly
  • Books
  • Case
    • iPad Case
    • iPhone Case
    • Mac Case
  • Column
    • Blog Writing
    • Career
    • Doctor Course
  • Design
  • Drug Development
  • Essay
  • Gadget
    • iPad Gadget
    • Mac Gadget
    • TV Gadget
  • Goods
    • Goods for Gadgets
    • IKEA
    • MUJI
    • Stationery
  • House
  • Lifestyle
    • Car
  • Movie / Drama
    • Foreign Drama
  • Music
    • Album
    • Headphone
    • Live
    • Music Note
    • Speaker
  • Net
    • Mobile Router
    • WiMAX
  • Opinion
  • Photograph
    • Camera
    • Eyefi
    • FlashAir
    • Photo Management
  • Qualification
    • Pharmacist
  • Skill-Up
  • Sony
    • Action Cam
    • Speaker
    • Xperia
  • Travel
    • America
    • Café
    • Drive! on cube
    • Fukuoka
    • Kamakura
    • Kobe
    • Kumamoto
    • Kyoto
    • Nagasaki
    • Nagoya
    • Oita
    • Saga
    • Sakura Week
    • Taiwan
    • Tokyo
  • Vlog
  • Web Services
    • Evernote
Archives
  • 2021年4月 (4)
  • 2021年3月 (9)
  • 2021年2月 (11)
  • 2021年1月 (10)
  • 2020年12月 (11)
  • 2020年11月 (9)
  • 2020年10月 (6)
  • 2020年9月 (9)
  • 2020年8月 (9)
  • 2020年7月 (10)
  • 2020年6月 (7)
  • 2020年5月 (8)
  • 2020年4月 (8)
  • 2020年3月 (11)
  • 2020年2月 (3)
  • 2020年1月 (9)
  • 2019年12月 (11)
  • 2019年11月 (8)
  • 2019年10月 (8)
  • 2019年9月 (16)
  • 2019年8月 (17)
  • 2019年7月 (21)
  • 2019年6月 (17)
  • 2019年5月 (17)
  • 2019年4月 (21)
  • 2019年3月 (32)
  • 2019年2月 (28)
  • 2019年1月 (31)
  • 2018年12月 (26)
  • 2018年11月 (10)
  • 2018年10月 (6)
  • 2018年9月 (8)
  • 2018年8月 (5)
  • 2018年7月 (8)
  • 2018年6月 (6)
  • 2018年5月 (11)
  • 2018年4月 (12)
  • 2018年3月 (9)
  • 2018年1月 (8)
  • 2017年12月 (6)
  • 2017年11月 (6)
  • 2017年10月 (1)
  • 2017年9月 (1)
  • 2017年8月 (7)
  • 2017年7月 (5)
  • 2017年6月 (9)
  • 2017年5月 (8)
  • 2017年4月 (4)
  • 2017年3月 (10)
  • 2017年2月 (5)
  • 2017年1月 (9)
  • 2016年12月 (9)
  • 2016年11月 (7)
  • 2016年10月 (4)
  • 2016年9月 (3)
  • 2016年8月 (4)
  • 2016年7月 (6)
  • 2016年5月 (8)
  • 2016年4月 (3)
  • 2016年3月 (3)
  • 2015年7月 (2)
Apple Music
starnote*
starnote*
  • Home
  • About
    • About this site
    • About the author
    • Contact
  • Travel
  • Photo
  • Gadget
    • Apple
      • Mac
      • iPhone
      • iPad
    • Sony
    • Camera
    • Android
  • Goods
  • Academic
    • My Research
    • Doctor Course
    • Pharmacist
  • Lifestyle
    • Essay
    • Column
    • House
    • Blog
    • Music
  • Blog
  • Blog Design
  • Design

ブログのデザインについて。今回のこだわりポイント。

  • 2017-08-18
  • Yusuke Miura

当ブログは昨日の深夜(というか今日の早朝)に「はてなブログ」から「WordPress」に完全移行しました。全く違うシステムに移行するということは、サイトのデザインを一から作り込む必要があるということです。

そこでこのエントリーでは、移行リニューアルにともなうデザイン変更について、僕がこだわったポイントを記しておきたいと思います。

もくじ

  • 1 海外の有料テーマを購入
    • 1.1 SmartBlog
  • 2 できるだけミニマルに
  • 3 Webフォントを導入
    • 3.1 ロゴもちょっと手直し
  • 4 カテゴリ名を英語に
  • 5 全然未完成です
  • 6 まとめ
    • 6.1 関連記事はこちら

海外の有料テーマを購入

リニューアルすると言っても、何もないところからデザインを作り出せるほどの技量は僕にはありません。誰かが準備してくれたものを少しいじって、カスタマイズすることができる程度です。

そうは言っても、メジャーな日本製テーマをベースに使うと他のWordPressブログと代わり映えしなくなってしまいそうです。だから今回はオシャレな有料海外テーマを購入して、日本語にローカライズしつつ、僕好みにカスタマイズすることにしました。

SmartBlog

で、購入したテーマがこちらの「SmartBlog」というテーマ。

SmartBlog
SmartBlog

→ SmartBlog

最初は「Authentic」というテーマを購入してみようと思っていたのですが、動的なコンテンツが多くて僕の手には負えなさそうだったので、よりシンプルな「SmartBlog」にしました。

できるだけミニマルに

今回デザインを作るにあたって心掛けたのは「できるだけミニマルに、無駄な要素を省く」ということです。

例えば、これがリニューアル直前の当ブログのデザインですが、はっきり言ってヘッダー部分のグラデーションとかいらないですよね。(自分で作ったくせにねー)

starnote* Previous Design
starnote* Previous Design

確かに、これはこれで「はてなブログ」という範疇で自分なりに頑張った結果だったのですが、WordPressに持って行くのはちょっと重苦しい。

「ミニマルに」というコンセプトの下、文字と背景のコントラストをはっきりとしつつ、全体的な雰囲気も明るくしたい。つまり、ウェイトの大きいフォントを適材適所で使い、大きくて明るい写真をどーんと置いてあげればいいわけです。

で、完成したのがこのようなデザイン。

starnote* Present Design
starnote* Present Design

ヘッダー部分は白地に黒のロゴだけ。余計なナビゲーションメニューも廃しました。その代わり、両サイドにハンバーガーメニューと検索ボタンをさりげなく配置しています。

また、記事本文も、太い文字は太く、そうでない文字は細くしてメリハリをつけました。文字色も以前より黒に近づけています。

Letters
Letters

スマホのような小さい画面でも読みやすくなったと僕は思っています。(読みにくいよーって人はコメントしてね)

Webフォントを導入

海外テーマを日本語にローカライズする際に避けて通れないのが「フォント」の問題です。アルファベットしか表示しない前提でテーマを作ってあるので、日本語の文章を入れたら違和感ありまくりなのです。

解決策は2つ。

1つ目は、CSSで「ヒラギノ角ゴ」「メイリオ」といったOS標準で入っているフォントを指定してあげることです。確かに移転前はこのような設定にしていたと記憶していますが、今回はやりたくなかった。

というのも、OS標準で入っているからといっても、必ずしも読みやすいとは限らないんですよ。特に、今回導入したUD(ユニバーサルデザイン)フォントと比べると天と地の差があると思います。

そこで、今回取ったのが2つ目の解決策「Webフォントの導入」です。採用したのは、Adobe Typekitで配信されている「TBUDゴシック」というフォントです。

TBUD Gothic
TBUD Gothic

このフォントを選んだ理由は2つ。1つは、RegularとHeavyを比較するとかなり太さが違うので、本文で使うとメリハリがつきそうだったから。記事タイトルや見出し、本文の太字の部分はすべてBoldではなくHeavyにしてみました。

2つ目の理由は、前述しましたが「UDフォント」だったからです。例えばアルファベットで「Illustrator」と書くと、ほとんどのフォントでは「I(アイ)」と「l(エル)」が同じように見えてしまいます。一方UDフォントでは、このような紛らわしい文字ははっきりと区別されています。だから読みやすい。

このような理由から、今回は「TBUDゴシック」をチョイスしてみました。

ロゴもちょっと手直し

ロゴの部分は以前から「Muli」というフォントを使っています。ロゴのフォントはブログのアイデンティティだと思っているので、そう簡単には変えたくなかった。

でもちょっと変化を持たせたかったので、「star」と「note」のウェイトを変えてみました。遊び半分でやったら意外とよかったので、そのまま採用しました。

カテゴリ名を英語に

記事のカテゴリを見てくださっている人、いるんですかね?

これまでは使い勝手重視で漢字ひらがなカタカナアルファベットと、何でもありなカテゴリ名でしたが、統一感を出すためにすべて英語にしてみました。

海外テーマを使ったので英語の方がしっくりくるというのも理由の1つです。それに加え、もともとアイキャッチ画像で英語を使いまくっていたので、カテゴリを英語にしても全く違和感がなかった。

Category Page
Category Page

カテゴリーページも可愛らしい感じになったと思っています。可愛さは求められてないかもしれないけどさ。

全然未完成です

と、自分なりにこだわったポイントをダラダラと書いてきたものの、まだ全然完成していません。現時点で60%くらいの完成度かな。でも一通り人に見せられる状態になったので、見切り発車で公開しました。

具体的には、サイドバー部分が手抜きなので、もう少し作り込む必要がありそうですね。最近の投稿にサムネイルを入れたり、広告ずれてるのを直したり。

また、記事下のGoogle関連コンテンツは一旦削除しましたが、復活させるかは考え中です。なんだかデザインが合わない気がしているのですが、うまく合わせる方法あるのかなぁ? 検討しよう。

まとめ

このようにカスタマイズしているうちに、デザインは奥が深いなぁと身に染みて感じています。今回はできるだけ「引き算」で作ってみましたが、もっとカスタマイズしているうちにまだまだ余計な要素が見えてくるかもしれません。一つを直すとまた別のところが気になってしまって、年中工事中のような状態になりそうです。

いずれにせよ、個人的には移転前のデザインより良くなったと思っています。しばらくはこのまま様子を見ますー。では!


関連記事はこちら

0
0
0
0
0
Related Articles
View Post
  • Blog
  • Weekly / Monthly

月刊すたのじん|2021年4月|書くことをもっと楽しもう

  • 2021-04-01
  • Yusuke Miura
View Post
  • Blog
  • Column

Yahoo!クリエイターズプログラムに参加しています

  • 2021-03-06
  • Yusuke Miura
View Post
  • Blog
  • Column

2021年も、気負わずマイペースでゆるりと進みたい

  • 2021-01-01
  • Yusuke Miura
View Post
  • Blog
  • Blog Writing
  • Column

starnote*のブツ撮りメソッド

  • 2019-11-04
  • Yusuke Miura
View Post
  • Blog
  • Weekly / Monthly

週刊すたのじん #037|ラストスパート。

  • 2019-09-29
  • Yusuke Miura
View Post
  • Blog
  • Weekly / Monthly

週刊すたのじん #036|気分で生きてる。

  • 2019-09-22
  • Yusuke Miura
View Post
  • Blog
  • Weekly / Monthly

週刊すたのじん #035|1週間の長崎帰省まとめ。

  • 2019-09-15
  • Yusuke Miura
View Post
  • Blog
  • Weekly / Monthly

週刊すたのじん #034|自分を追い込む日々。

  • 2019-09-01
  • Yusuke Miura
Apple Music
Follow Me!
Twitter
Instagram
YouTube
Pinterest
about
Yusuke Miura, PhD
薬学部6年制課程を卒業後、そのまま博士課程に進学。2019年3月に「博士(薬学)」の学位を取得しました。Macとカメラとクルマを愛する1988年生まれのミレニアル世代です。僕自身はとても飽きっぽい性格なので、自分にひとつの軸を通したくてこのサイトを運営しています。
MORE INFO
Shuffle Posts!
  • XF18-55mmF2.8-4 R LM OISを購入した理由
    • 2020-12-24
  • 調子の悪かったiMacをHigh Sierraにアップデートしたら謎の復活を遂げました。
    • 2017-11-19
  • 思考停止するために、家中の乾電池をエネループに統一する
    • 2020-04-20
  • iPhoneのホーム画面を1ページだけにしたら快適だった
    • 2020-11-23
  • 樹齢3000年の大迫力。佐賀県武雄市の武雄神社にある大楠を見てきた。
    • 2018-03-11
  • 規則正しい生活を送るためには家の間取りが重要だと思う
    • 2019-04-30
  • 薬剤師免許の申請に必要な「診断書」を無料で手に入れる方法
    • 2019-03-19
  • バラエティ番組が大嫌いな僕がよく見るYouTubeチャンネル10選
    • 2019-01-12
  • Google Nest Hubはデジタルフォトフレームの最適解だ
    • 2020-07-28
  • 東京から九州に向かう学生は、ソラシドエアのヤング割を使うとおトク
    • 2019-03-14
Follow Me!
Twitter
Instagram
YouTube
Pinterest
about
Yusuke Miura, PhD
薬学部6年制課程を卒業後、そのまま博士課程に進学。2019年3月に「博士(薬学)」の学位を取得しました。Macとカメラとクルマを愛する1988年生まれのミレニアル世代です。僕自身はとても飽きっぽい性格なので、自分にひとつの軸を通したくてこのサイトを運営しています。
MORE INFO
Tweets by info_starnote
Categories
  • Academic (50)
    • My Research (3)
  • Android (3)
    • dtab (3)
  • App (10)
    • iOS App (3)
    • Mac App (6)
    • Web App (1)
  • Apple (75)
    • Apple Music (4)
    • iPad (19)
    • iPhone (25)
    • Mac (33)
  • Blog (84)
    • Adsense / Affiliate (1)
    • Blog Design (4)
    • Weekly / Monthly (59)
  • Books (4)
  • Case (9)
    • iPad Case (2)
    • iPhone Case (6)
    • Mac Case (1)
  • Column (97)
    • Blog Writing (27)
    • Career (5)
    • Doctor Course (15)
  • Design (12)
  • Drug Development (1)
  • Essay (21)
  • Gadget (97)
    • iPad Gadget (6)
    • Mac Gadget (3)
    • TV Gadget (1)
  • Goods (59)
    • Goods for Gadgets (4)
    • IKEA (8)
    • MUJI (6)
    • Stationery (5)
  • House (42)
  • Lifestyle (122)
    • Car (45)
  • Movie / Drama (2)
    • Foreign Drama (2)
  • Music (24)
    • Album (3)
    • Headphone (12)
    • Live (1)
    • Music Note (3)
    • Speaker (3)
  • Net (4)
    • Mobile Router (2)
    • WiMAX (1)
  • Opinion (11)
  • Photograph (71)
    • Camera (26)
    • Eyefi (4)
    • FlashAir (1)
    • Photo Management (4)
  • Qualification (8)
    • Pharmacist (8)
  • Skill-Up (1)
  • Sony (6)
    • Action Cam (3)
    • Speaker (1)
    • Xperia (1)
  • Travel (124)
    • America (12)
    • Café (14)
    • Drive! on cube (13)
    • Fukuoka (2)
    • Kamakura (10)
    • Kobe (2)
    • Kumamoto (2)
    • Kyoto (6)
    • Nagasaki (23)
    • Nagoya (6)
    • Oita (2)
    • Saga (4)
    • Sakura Week (5)
    • Taiwan (10)
    • Tokyo (2)
  • Vlog (8)
  • Web Services (5)
    • Evernote (1)
Series
2018年まとめ 2019年まとめ 2020年まとめ BATTABI BRUNO CX-5 Featured FUJINON XF18-55mmF2.8-4 R LM OIS FUJINON XF23mmF2 R WR iPhone 12 Pro Max My Research Panasonic Cuble PRESSo Recommendation SIGMA 24-70mm F2.8 DG DN Art Sony A7III Super Takumar 55mm F1.8 X-T200 すたのじん ゆるゆる名古屋旅 わたしたちと鎌倉 アメリカと薬学 年末まとめ 週末台湾 長崎ランタンフェスティバル2019
Latest Posts
  • Logicool Pebbleをリピ買い。軽量、シンプル、静音なマウス。
    • 2021-04-07
  • CX-5と暮らす|遠出して体験する「価値ある非日常」を生み出す起点となる車
    • 2021-04-04
  • 飽きっぽい僕がブログを5年も継続できた理由と、その先にあった世界
    • 2021-04-02
  • 月刊すたのじん|2021年4月|書くことをもっと楽しもう
    • 2021-04-01
  • SIGMA 24-70mm F2.8 DG DN Art|上野公園の桜
    • 2021-03-30
  • Panasonic Cuble|2年で調子が悪くなってきたかも
    • 2021-03-26
  • いいアイデアが出てこないときは無理しない
    • 2021-03-23
starnote*
© 2015-2021 Yusuke Miura All rights reserved.

Input your search keywords and press Enter.