【メンバーブログ】たんなん夢レディオのウェブサイトを制作しました【ウェブ制作】

たんなん夢レディオさんのウェブサイト

こんにちは。リポーター兼ウェブサイト管理担当のりょうです。

さて、スリーミーなひとときを放送させて頂いている福井県鯖江市のNPO法人「たんなん夢レディオ」のウェブサイトが３月３１日にリニューアルしました。私はリニューアルで主にフロントエンド（ウェブデザイン）を担当しました。

そこで、今回は制作を終えての感想や反省点を書きたいと思います。

工夫点

２０１３年１０月にたんなん夢レディオさんのウェブサイトが大幅にリニューアルされましたが、今回はその時の反省点を踏まえて制作しました。

主要ブラウザで表示が乱れないようにする

２０１３年に制作したサイトをInternet Explorer 8~9で表示すると表示が崩れていました。画像の枠線が表示され、トップページのスライドショーはカラム落ちしているなどと様々な問題が後になってわかりました。

原因は正しく表示されるかどうかのチェックテストをFirefoxとChromeでしか確認しなかったからです。手元にWindowsのパソコンがなかったので、Internet Explorerでチェックテストをしようが無かったのです。

そこで今回の制作では、Windowsが動く環境を何とか用意してInternet Explorer 8~11でもチェックテストをしました。
他のブラウザでは意図した通りに表示できていてもInternet Explorer 8~9では表示が崩れることが多々あります。今回はそのようなブラウザでも表示されるように解決策を調べて修正しました。

また、新しいウェブサイトはスリーミーなひとときのウェブサイトと同様に、スマートフォンやタブレットでも見やすいように制作しました。

facebookとの連携

今やfacebookでウェブサイトが共有（シェア）されることは珍しいことはではありません。シェアされたウェブサイトに適した画像とタイトル・説明文が表示されると、facebookでのウケも設定していない場合と比べて違います。

facebookにウェブサイトへのリンクを貼った時の表示。大須観音の画像が表示されています。

例えば、上の画像は名古屋リポートなう＠大須観音の記事をfacebookで共有したときに表示されるカードです。大須観音の画像が大きく表示されていますね。これは、ウェブサイト側でこの画像が表示されるように設定しているからです。

このように設定すれば、facebookのウォール（タイムライン）を眺めていて思わず、「ここはどこだろう？」を目を止めるかもしれません。ひょっとしたら「いいね！」を押したくなるでしょう。

仕組みや仕様はここでは省きますが（気になる方は「facebook OGP」で検索してください）、たんなん夢レディオさんのウェブページもfacebookで適切な画像と説明文が出るように設定しました。そうすることで初めてご覧になる方が興味を持っていただけるようにしました。

反省点

第一にデザインをちゃんと決めずにいきなりコーディングから始めたことです。

本来はデザインのイメージをラフに描いて、それをPhotoshopなどのソフトでモックアップを作成してから制作すべきなのです。しかしラフを描いた段階で作成したばかりに具体的なイメージがまとまらず、何度もデザインを修正する羽目になりました。一度具体的なイメージを固めてからの方が効率的に作れると、今思っています。

第二にチェックが甘かったことです。公開された後に、誤字脱字や不適切な画像が表示されていることが分かりました。後にたんなん夢レディオさんが修正されると思いますが、一字一句逃さずにチェックすべきだったとは思っています。

最後にウェブサイトの制作に協力してくださった、たんなん夢レディオの石川さんとミキサーのたまにはこの場をお借りして感謝を申し上げます。ありがとうございました。