サイトの文字を大きくしたことと、このサイトの成り立ちに関する話

2017年2月13日(月) 23:22 | 日記

当サイトをパソコンで見たときの文字を大きくしました。以前は14pxでしたが、16pxに拡大しました(現在も記事本文以外の、メニューなどの文字は14pxです)。
それに伴って、サイトの横幅は850pxから960pxに拡大しました。記事部分の横幅は600pxです。
スマホ版は特に変更していませんが、近いうちにこちらも文字を大きくするかもしれません。

そういえば、サイトを今のデザインにしたのはいつだっけと思って振り返ってみたら、2013年4月のことでした。当時の日記(下記)に旧サイトのデザインのスクリーンショットが載っているのですが、あらためて見るとわりと大がかりな変更だったんですね。今のデザインが個人的にしっくり来ているのと、更新頻度がものすごく低くなって最近は放置気味という事情のため、サイトの改善をしようという気概もなく4年近く現状維持を続けて、ようやく重い腰を上げて文字サイズの変更だけしてみたということです。

2年ぶりにサイトのデザインを一新

文字を大きくするトレンド

仕事では雑誌や新聞、パンフレットなどの紙媒体の制作がメインですが、ウェブサイトの仕事も受注します。だからいちおうウェブサイトのデザインのトレンドみたいなものには触れているつもりです。ここ2~3年の大きな動きはいくつかありますが、その中で当サイトとも関連しそうなのは「レスポンシブデザイン」と「見出し、本文、画像などの要素の巨大化」の2点です。
レスポンシブデザインとは、同じサイトを異なる画面サイズの端末で閲覧する場合に、それぞれの環境に合った表示を1つのHTMLで実現させる方式のことです。パソコン用、タブレット用、スマホ用で(サーバーで端末を判断して振り分けて)別々のページにアクセスさせるのではなく、いずれも同じページにアクセスさせるけれど、見え方はそれぞれ変わるようにします。会社で受注するサイト制作の依頼のうち、だいたい8割くらいがレスポンシブ対応を求められます。
当サイトもレスポンシブに対応しています。2013年4月以降、しばらくはスマホでもパソコンと同じ表示がされていて、それでも大きな支障はなかったのですが、やはりテキスト中心のサイトで横スクロールが出るのは不親切だということでレスポンシブ化に取り組み、同年11月に対応が完了しました。

当サイトがスマートフォンに対応しました

もうひとつのトレンドは「見出し、本文、画像などの要素の巨大化」です。現在、ニュースサイトの記事本文は16pxが標準です。昔は14px以下のサイトも多かったと記憶していますが、最近では減ってきました。
見出しや写真の扱いも昔より大きくなったように思います。その極端な事例が、去年の終わりに問題になったいわゆるキュレーションサイトで、すっかすかな内容を埋めるかのような意味のない大きな写真、検索エンジンに読ませるためだけのキーワードをちりばめた大きな見出しを配置するあのスタイルは独特の臭気を放っています。
キュレーションサイトの様式は極端だとしても、ページビューを増やすことに命をかける人たちが「どのフォントサイズが最も読まれるか」という試行錯誤を重ねた結果があのデザインなわけですから、そのノウハウはある程度は信頼してもいいのでしょう。
ただ個人的な好みとして、あらゆるサイトで見かける「記事の冒頭にイメージ画像を置く」という風潮だけは好きになれないので、そういう技法は取り入れません。わざわざ記事を読みに来てくれた方に、記事の本題に入る前に関係ない画像を見せるのは失礼なのではと個人的には思っています。このへんの話は過去の日記でも書きました。

そのイメージ画像は誰のため?

Movable Typeでサイトを作り続ける理由

個人がブログを運営するなら、アメーバブログやはてなブログやLINEブログなど無料で使えるサービスを使うのが普通ですが、僕は2007年1月以降、月額515円を払ってレンタルサーバーを借りて、そこに「Movable Type」というシステムを入れて自前でサイトを運営しています。2006年末まではシーサーブログというサービスを使っていました。さらに言えば2004年5月から半年くらいはフリーの日記CGIサービスを使っていて、このときがインターネットで文章を公開し始めた最初の経験でした。シーサーブログからMoveble Typeに移行したときのことも過去の日記に書いています。とはいえ今から10年以上も前の話で、当時とはウェブを取り巻く状況はずいぶん変わったので、参考にできるところはほとんどないかと思いますが。

日記の移転が完了しました
サイトのカスタマイズは一段落
Movable Type移行メモ(1)…シーサーブログの限界
Movable Type移行メモ(2)…Movable Typeの導入とサーバー選び

なぜわざわざ自前でブログを運営しているかといえば、「ただより高いものはない」ということわざに尽きます。このほか、個人でサイトを作ることでウェブデザインやウェブサーバーに関する知識を身に付けたいという目的もあります。
Movable Typeにもブログのテンプレートがあって、このテンプレートを適用すれば誰でもすぐにブログが作れるのですが、当サイトのデザインは既存のテンプレートを踏襲していない、完全なオリジナルです。
2006年に会社でウェブサイトを作る仕事があって、それでMovable Typeの使い方を覚えたのが始まりです。さらに言えば、前職でもウェブサイトのデザインをする必要があって、HTMLの書き方を独学で身に付けました。

個人的には「既存のブログサービスではできないことをしたい」「自分でサイトを作ることでウェブデザインの知識をつけたい」という明確な意図がなければ、わざわざ自分でお金を払ってブログを運営することはないと思います。
特にアフィリエイト収入が目的でブログを運営する人にとっては、おそらくは既存のブログサービスの方がSEO(検索エンジン最適化)的に有利なので、よほどのことがなければ既存のサービスを使うのがよさそうです。

WordPressではなく、あえてMovable Type

既存のサービスではない自前のブログを立ち上げるなら、今ならWordPressというシステムを選ぶ人がほとんどだと思います。
WordPressは無料で使えるうえ、無料ゆえに機能を拡張するためのプラグインも充実しています。Movable Typeは商用で使う場合はそれなりのお金がかかってしまうので、どうしても無料の方が選ばれやすいのでしょう。
個人で非商用で利用する場合は、どちらのシステムを選んでも自由です。僕も一時、このサイトのシステムをWordPressに移行することを検討しました。そのうえでMovable Typeを使い続けています。

その理由は、Movable Typeで作るサイトは基本的に静的HTMLであることと、生成されるサイトのURLを通し番号にしたいけれど、それがWordPressでは難しかったことです。いずれもそこまで重大な理由でもなく、完全に好みの問題です。
動的ページにすることで、サイトの表示が1秒程度遅れてもそんなに問題ないとか、個別ページのURLは自分で指定するかシステム任せでいいという場合は、ユーザーが圧倒的に多くてプラグインも豊富なWordPressを選んだ方がいいかと思います。

スマホ版の文字サイズとメール投稿をどうするか

サイトの横幅と文字サイズを調整したついでに、Movable Typeのバージョンも最新にしました。現時点での最新のバーションは「6.3.2」で、去年の9月にはリリースされていたのですが、このサイトのバージョンは長いこと「6.2.4」のまま止まっていました。古いバージョンには画像のアップロードに関していろいろと不具合があったのですが、ようやくそれが解消しました。
さらに、印刷用CSSも見直しました。印刷用CSSというのは、サイトを印刷するときのみ適用されるデザインの設定ファイルのことです。当サイトの印刷設定は、通常の表示とはかなり大胆に変えていて、サイドナビなどをすべて取り払って記事のタイトルと本文のみが印刷されるようにしています。今回はこれに加えて、大きい画像を印刷のときのみ縮小するなどの措置を追加しました。気になった人は、ブラウザーで印刷プレビューを見ていただければと思います。
もちろん、このサイトを印刷する人なんていないことは分かっています。僕も印刷したことはありません。ただの自己満足です。

今後は、冒頭にも書いたようにスマホで見た場合の文字サイズの調整をしようと考えています。現状は一般的なニュースサイトよりちょっと文字が小さいのですが、大きくするとトップページの縦スクロールが今以上に長くなってしまうので、大きくするか現状維持か決めかねているところです。

あとはメールで記事を投稿できるようにしたいと思います。以前はMovable Typeのメール投稿サービスを無償で提供する業者があったのですが、ずいぶん前にサービスをやめてしまったので、今は外出先でサイトを更新するとき、わざわざブラウザーから管理画面を立ち上げています。これだとかなりめんどうなので、以前のようにメールで更新できるよう、必要なプラグインを入れてみたいと思います。

コメントを投稿

※サーバーの状況によって、投稿完了まで時間がかかることがあります。
※投稿内容がすぐに反映されないことがありますが、ページを再読み込みするとコメントが表示されます。
※入力したURLは公開されますが、メールアドレスは公開されません(管理者に対してのみ通知されます)。