本館サイトをスマホ対応に

毎日見ているネットの世界が知らないうちに進歩していて驚きました。

一見したところ普通のパソコン向けのサイトのように見えます。でも、ウィンドウの横幅を狭めていくと、あるところでレイアウトが変わってタブレット向けに、さらに狭めていくとスマホ向けに変わります。そういうウェブサイトが増えています。

まだそんな仕組みを見たことがなくて、いまパソコンを使っている方は、私の 本館サイト で試してみてください。

横幅960ピクセル固定の2段組み → ウィンドウ幅に合わせて幅が変わる2段組み → 1段組みでメニューは末尾に

このように3段階に変化して、画面の大きさに合わせたレイアウトになります。

スマホ向け（モバイルフレンドリー）サイトの作り方としては、まったく別々のページを構築する方法もありますが、同じページの見え方だけを変える方法をGoogleは推奨しているそうです。その方がウェブ制作者側の管理の手間が減り、また、Googleにとってもデータ更新の負担が減るからです。

そんな高度なことが素人にできるはずないと最初は思いましたが、ちょっと調べたら意外に簡単にできることがわかりました。
具体的には、HTMLという個別のファイルに1行ずつ書き足します。そしてCSSというファイルに10行ほど書き足します。
これだけで、ウィンドウの幅に合わせてレイアウトが変わっていくページができてしまうのです。

やり方を調べてレイアウトを試行錯誤するのに10時間くらいかかりました。それから、個別のファイルに1行ずつ書き足すのも30分くらいかかりました。（私のサイトのHTMLファイル数は80ほどです。）

Googleにモバイルフレンドリーと認められると、スマホでの検索結果に「スマホ対応」と表示されるようになります。私のサイトも認めてもらえたようです。

スマホを使えばすきま時間に情報収集や勉強ができますから、今後はレイアウトだけでなく内容もスマホで読みやすい長さや見出しを意識しようかなと思います。

画面の横幅に合わせてレイアウトが変わる仕組みになっている他のサイトの例を載せておきます。

　日本分光
　株式会社ワイエムシィ
　東京化成
　秀和システム

Twitterの利用法：RSS配信用＆他サイトでのコメント記録

今ごろですが、自分なりのTwitter利用法を考えました。

６年前に私は 日記・つぶやき・思いつきは書かない と宣言しました。その頃はまだブログが広がり始めた頃で、まさか「つぶやき」専門のサイトができて有名人を含む多数の人たちが常時つぶやくようになるとは想像もしていませんでした。

私の姿勢はずっと変わらず、極めて低い更新頻度でほそぼそとネット活動を続けています。Twitterに登録しましたが、大量の書き込みをすることはないと思います。

でも、これまで欲しいと感じていた機能のうち二つがTwitterでかなえられることに気づきました。

一つは 分析化学のページ のRSS配信です。RSSリーダーでまとめて更新チェックできるサイトが増えるにつれ、対応していないサイトには不満を感じるようになりました。でも自分のサイトをRSS対応にする技術と時間がなくて、何とかしたいと思ってきました。Twitterは、さっとコピペするだけでRSS生成アプリとして働いてくれます。

もう一つは、よそのサイトで書き込んだコメント等の管理です。これについてもちょっと悩んで、自分の足跡を管理する という記事を書いたことがありました。一つの方法として「他サイトで中身のある発言をした場合は、自サイトにも転載しておく」と結論付けましたが、困るのは、自分のサイトに転載するに際してどう扱うかです。独立した記事にするほどでもない発言で、でも記録しておきたい・・・そういう場合にどうするかです。
Twitterは短いコメントを記録しておくのにぴったりの軽さだと思います。

以上二つの目的を設定したので、逆に、普通の「つぶやく」使い方はしない、そういうことになります。ノイズになってしまいますから。Twitterらしい面白さが全然ないですが、たぶんこのまま行くと思います。

私のTwitter：tsumurayukari

本館のサイトデザイン変更

　本館 のサイトデザインを変更しました。一番の目的は、トップページに空白が多くてスペースがもったいなかったのを、もっと詰まったレイアウトにすることでした。ついでに、見出しに印を付けたりしました。以前より読みやすくなったでしょうか。めざしたのは「固いイメージ」です。美しさや感じのよさはあまり追求していません。
　スタイルシートを使っていますので、閲覧環境によってレイアウトが崩れるかたは、ぜひ教えてください。

　色については、仕事中に平然と開けるサイトデザインは？ で、ぞうさんから「わたしなら堅いイメージにするならブルー系統に統一するかな。ワンポイントでグリーン、赤、オレンジとかがあってもいいかも」とコメントを付けていただいたので、まったくそのとおりの色づかいにしました。色調はややくすんだものにしています。

　色で一番苦労するのは背景色ではないかと思います。216色のセーフカラーだけでは、ちょっと濃すぎると感じる色しかなくて。

セーフカラーのブルーの中で一番薄い色はこれですが、私は、ちょっと濃いかなと思います。好みの問題ですけど。

結局、竹中明夫さんのページの背景色を引き続き使わせていただくことにしました。

　新しくウェブページを作りたいと考える人にとって、デザインは頭痛の種でしょう。デザインを考えるのが楽しいという人ならいいですが、書きたいことはちゃんとあって、あまりデザインを考えたくない場合は悩みます。私は今までテキストを並べただけのページを作っていましたが（今でもほとんどそうですが）、角谷　拓さんのページ には感心しました。竹中明夫さんのページ とそっくりのデザインです。将来的には自分のデザインを作られるとのことですが、思い切りのよさに感心。ここまでとことん真似する人が現れると、これが竹中テンプレートとして確立したりして。研究者が新しくサイトを作るときは、とりあえずこのテンプレートで作るのが定番になったりして。そうなれば、作成者にとっては開設時の労力が少なくなり、読者にとっては最初から読みやすいページ構成が提供されて、みんながうれしいと思います。
　それにしても竹中さんは心が広いですね。

仕事中に平然と開けるサイトデザインは？

　来月から 本館ページ のデザインを変更しようと思っています。前々から、あるかたに「津村さんのトップページはなぜか空白部分が多い。もっと詰めたほうがよい。トップページ（スクロールしない１画面だけ）でだいたいの様子がわかり、行きたい所へ行けるようなものが理想です」というアドバイスをいただいていました。が、なにしろ技術がないので、そんなページをどうやって作ればいいかわかりませんでした。このほど、やっとそういうスタイルシートを作れるようになりました。（実はそんなに難しいことではなく、私が勉強しなかっただけです。）

　この際、私のページを読んでくださっている皆さんと、見たこともない皆さんにおききしたいことがあります。仕事中に平然と開けるサイトデザインとは、どんなものでしょうか？思い切り主観的な御意見でいいですから、コメント・トラックバック・メールで教えてください。

　たいがいのホームページは、「仕事で仕事向けに作る」「仕事で遊び向けに作る」「遊びで遊び向けに作る」の３パターンの中のどれかです。私のように「遊びで仕事向けに作る」のはかなり特殊だと思います。
　ページ内容的には、堂々と仕事中に読んでもらえる（というか、仕事中以外読む気にならない）中身だと自負しています。（このblogは違いますが。）でも、後ろからぱっと画面を見られたとき、なんか遊んでるのではないかと思われるような見かけになったら、読んでいただきにくいと思います。

　私が思いつくところでは、仕事中に開きにくいサイトデザインとして

• 背景色が黒・ピンク・赤・オレンジ。文字が白抜き


• 大きなイラストや写真


• やたらチカチカしたりテロップが流れたり、大きなアニメーション


• 色使いがカラフルすぎたり、パステル調


• あかぬけすぎている

というようなことが挙げられると思っています。（反対意見もあるかもしれません。）

　逆に、一番無難なのは、「背景色：白」だと思います。官公庁のページはだいたいそうなので。
　でも、明るいオフィスで読むぶんには白でいいのですが、自宅の照明の下で読むときには、画面全体が白はちょっとまぶしいと私は考えています。私のページへのアクセス数は「平日昼間」と「夜間・土日祝日」が半々くらいなので、両方の環境で読みやすいようにしたいです。

　そういうわけで、現在はこういう薄い青色を背景色に使っています。これは、 竹中明夫さんのページ の背景色のまねです。

　いつまでもまねさせていただくのも申し訳なく、デザインを変えるのをきっかけに色使いも変えようと思っています。

　例えばこの程度の緑色です。こういう薄い色はセーフカラーにはありませんし、ディスプレーによってはほとんど白に見えてしまったりするでしょうが、白く見えるならそれでもいいということで。（まぶしくていやな人は、自分で調整しているでしょう。）

　あと、各ページのタイトルは　こういう色はどうかと思っています。　かなり固い印象ではないでしょうか。

　仕事中に開きやすいデザインについて、ほんの一言の御意見でも、どうぞよろしくお願いします。

追記　報告記事 本館のサイトデザイン変更

分析化学のページへのご意見・ご感想・リンク紹介など

　ウェブログを作ってみました。使い方はまだあまり考えていません。
　とりあえず、私のホームページには掲示板を付けていないので、掲示板がわりに利用していただければと思っています。（需要があるかどうかわかりませんが・・・）匿名・ニックネームでの投稿可です。この記事に対してコメントまたはトラックバックしてください。
　特に、私のページにリンクを張られた場合、報告はまったく不要なのですが、よろしければここに書き込んでいただければ、関心の共通した読者の目に触れる機会の一つになるかと思います。自分のココログをお持ちでない方は、コメントをお使いください。URLを書き込む欄があります。本文中にURLを書いても、そのままリンクになります。