ホームページのリニューアルに際して
7月はじめに生野学園のホームページをリニューアルしました。とは言っても変えたのは全体のトップページと中学、高校の入り口だけなので「全面改訂」というわけではありません。でもそれだけでもだいぶ雰囲気は変わったのではないかと思っています。
じつはその作業をする中でいろいろと気付かされることがあったので、今月はそのお話をしてみようと思います。ただ話の中でHtmlやCSSという言葉を使うことになるので、まずはその説明から始めます。ご存じの方は読み飛ばしてください。
インターネットを利用する人が使っている端末にはたくさんの種類があります。WindowsPC、Mac、iPhone、Android、Linux、HarmonyOS・・・、と実に様々です。そして、こうした機器はそれぞれ独自の方法で画面表示をしています。ですから、もしそれぞれに合わせたプログラムを書かなければならないとしたらとんでもない手間になってしまいます。そこで考え出されたのがHtml（Hyper Text Markup Language)とCSS (Cascading Style Sheet)という仕組みです。
Htmlというのはページを記述するときに「この部分は見出し」「ここは本文」「ここにはこういう写真が入る」「ここは表」というように、ページの内容だけでなく、その構造も一緒に記述する言語です。
そしてCSSというのは、例えば「見出しの文字はこのサイズで、画面の中央に」「本文はこのフォントで左寄せ」「写真はこのサイズで本文の右横に」といったようにページの「見え方」を指定する言語です。
実際のホームページはこのHtmlとCSSの組み合わせによって記述されています。つまりホームページの正体は「これこれの内容をこのように表示してね」という「指示書」のようなものなのです。各端末はその「指示書」を受け取り、記載されている指示に則ってそれぞれの方法でページを表示していくのです。
この仕組みによって、どの端末でもだいたい同じようにページが表示されるわけです。
以上、HtmlとCSSの説明でした。
次に簡単に生野学園のホームページの歴史を振り返っておきます。
生野学園のホームページが出来たのはけっこう早く、25年くらい前、まだインターネットにダイアルアップ回線で接続していたころのことだったと記憶しています。もっとも当時のホームページは「公式」のものではなく、生徒たちから「学園のホームページを作ろう」という声が上がり、何名かの生徒と自分がクラブ活動的に作り始めたものでした。ですから「生野学園の情報を広く発信していく」というよりは学園を知っている人を対象とした「内輪向け」の性格が強かったように思います。
その後インターネットが爆発的に普及して行き、数多くの人たちがホームページを見るようになると「今のページだと知らない人が見たら誤解をされるのではないか」という懸念が生まれ、内容を再検討していく中で徐々に「公式ページ」へと移行していったのです。
生野学園のホームページはこうした経緯で誕生したため、その制作と管理にはずっと自分が関わってきました。ページが増えるにつれ1人では負担が大きくなってきたので、ブログ感覚で記事や写真をアップできるシステムを導入し、担当スタッフに役割分担してもらうようになりましたが、システムそのものの管理、HtmlやCSSなどの記述、サーバーの維持管理などは今も自分の担当です。
ですが、今回のリニューアルでは初めてホームページのデザインを専門家に依頼しました。
その理由は、自分のような「年寄り」のセンスではなく、若い人たちにアピールするより魅力的なページにしていく必要性があったからです。ただHtmlとCSSの「実装」、つまりデザイン通りに表示してもらうための「指示書」の作成については引き続き自分が担当することになりました。
実際にどのように変わったかはトップページでご確認ください。
以前のページをご存じの方は「だいぶ変わった」という印象を持たれるのではないでしょうか。
はじめてこのデザインを提示された時「バラエティに富んだ楽しげなデザインだな」という印象を持ちました。動画や画像がふんだんに使われいるし、記事の見せ方も枠で囲ったものや画面をフルに使ったものなど多様で、他のページへ飛ばすリンクにも何種類かの方法が使われいます。これに比べると自分が作ったものは「画一的で面白みにかけるな」と感じたのです。
ただコードを実装する立場としては、Htmlの部分はさほど変わらないのですが、CSSの方は多様な「見せ方」をするのでとても手間がかかりました。実際CSSのコードはこれまでに比べるとかなり長くなっています。でもこうした手間を惜しまず、細部にまでこだわって作らないと魅力的なページにならないと反省した次第です。
もう一つ感じたのは1ページに込められた情報量の多さと「見せ方」の巧みさです。
以前のページでは、他のページへのつながり（リンク）は文字をベースにした「メニュー」で表示していました。ところが提示されたデザインではリンク先のページの内容の一部を画像と文字を組み合わせて表示しています。「リンク先に何があるのか」を少し見せることでユーザーのクリック、タップを誘っているわけです。
その分、１ページの情報量は増えるのでページが縦長になり、全部を見るためにはスクロールが必要になります。でも、リンク先に飛ぶよりはスクロールのほうが圧倒的に早いので、細かく分類してページの遷移を増やすよりは1ページの情報量を増やしたほうが良いようです。ページの中に、ユーザーの好奇心を誘いクリックしたりスクロールしたりする動作を促す要素を散りばめることが重要なのでしょう。
例えて言うと新デザインは、商品が魅力的に並べられたマーケットの中で、いろいろ発見しながら楽しく買い物をするイメージ。旧ページは、商品目録を手渡されてその中からほしい商品を選ぶイメージです。目的の商品が既に決まっているのなら目録から注文するのが手っ取り早いのかもしれません。でもそこにはいろいろ見て回って楽しむというユーザーの行為が欠落しているわけです。
ただこれらはいずれも「程度」の問題ではあります。「多様さ」も度を越してしまえばカオスになるし、「情報量」も多くなりすぎれば焦点がぼやけてきます。ですから多様な中にも統一感を感じさる工夫をしたり、情報量の絶妙のバランスを取っていくのが、デザイナーの腕の見せ所なのでしょう。
これに対し自分の作っていたものは、そうした視点で見れば、シンプルすぎで文字に頼りすぎの傾向があったと思います。とても勉強になりました。
実は以前、ある方から「篠原さんは文字の人ですね」と指摘されたことがあります。
今回のリニューアル作業を通し、改めてそのことを自覚させられたしだいです。
じつはその作業をする中でいろいろと気付かされることがあったので、今月はそのお話をしてみようと思います。ただ話の中でHtmlやCSSという言葉を使うことになるので、まずはその説明から始めます。ご存じの方は読み飛ばしてください。
インターネットを利用する人が使っている端末にはたくさんの種類があります。WindowsPC、Mac、iPhone、Android、Linux、HarmonyOS・・・、と実に様々です。そして、こうした機器はそれぞれ独自の方法で画面表示をしています。ですから、もしそれぞれに合わせたプログラムを書かなければならないとしたらとんでもない手間になってしまいます。そこで考え出されたのがHtml（Hyper Text Markup Language)とCSS (Cascading Style Sheet)という仕組みです。
Htmlというのはページを記述するときに「この部分は見出し」「ここは本文」「ここにはこういう写真が入る」「ここは表」というように、ページの内容だけでなく、その構造も一緒に記述する言語です。
そしてCSSというのは、例えば「見出しの文字はこのサイズで、画面の中央に」「本文はこのフォントで左寄せ」「写真はこのサイズで本文の右横に」といったようにページの「見え方」を指定する言語です。
実際のホームページはこのHtmlとCSSの組み合わせによって記述されています。つまりホームページの正体は「これこれの内容をこのように表示してね」という「指示書」のようなものなのです。各端末はその「指示書」を受け取り、記載されている指示に則ってそれぞれの方法でページを表示していくのです。
この仕組みによって、どの端末でもだいたい同じようにページが表示されるわけです。
以上、HtmlとCSSの説明でした。
次に簡単に生野学園のホームページの歴史を振り返っておきます。
生野学園のホームページが出来たのはけっこう早く、25年くらい前、まだインターネットにダイアルアップ回線で接続していたころのことだったと記憶しています。もっとも当時のホームページは「公式」のものではなく、生徒たちから「学園のホームページを作ろう」という声が上がり、何名かの生徒と自分がクラブ活動的に作り始めたものでした。ですから「生野学園の情報を広く発信していく」というよりは学園を知っている人を対象とした「内輪向け」の性格が強かったように思います。
その後インターネットが爆発的に普及して行き、数多くの人たちがホームページを見るようになると「今のページだと知らない人が見たら誤解をされるのではないか」という懸念が生まれ、内容を再検討していく中で徐々に「公式ページ」へと移行していったのです。
生野学園のホームページはこうした経緯で誕生したため、その制作と管理にはずっと自分が関わってきました。ページが増えるにつれ1人では負担が大きくなってきたので、ブログ感覚で記事や写真をアップできるシステムを導入し、担当スタッフに役割分担してもらうようになりましたが、システムそのものの管理、HtmlやCSSなどの記述、サーバーの維持管理などは今も自分の担当です。
ですが、今回のリニューアルでは初めてホームページのデザインを専門家に依頼しました。
その理由は、自分のような「年寄り」のセンスではなく、若い人たちにアピールするより魅力的なページにしていく必要性があったからです。ただHtmlとCSSの「実装」、つまりデザイン通りに表示してもらうための「指示書」の作成については引き続き自分が担当することになりました。
実際にどのように変わったかはトップページでご確認ください。
以前のページをご存じの方は「だいぶ変わった」という印象を持たれるのではないでしょうか。
はじめてこのデザインを提示された時「バラエティに富んだ楽しげなデザインだな」という印象を持ちました。動画や画像がふんだんに使われいるし、記事の見せ方も枠で囲ったものや画面をフルに使ったものなど多様で、他のページへ飛ばすリンクにも何種類かの方法が使われいます。これに比べると自分が作ったものは「画一的で面白みにかけるな」と感じたのです。
ただコードを実装する立場としては、Htmlの部分はさほど変わらないのですが、CSSの方は多様な「見せ方」をするのでとても手間がかかりました。実際CSSのコードはこれまでに比べるとかなり長くなっています。でもこうした手間を惜しまず、細部にまでこだわって作らないと魅力的なページにならないと反省した次第です。
もう一つ感じたのは1ページに込められた情報量の多さと「見せ方」の巧みさです。
以前のページでは、他のページへのつながり（リンク）は文字をベースにした「メニュー」で表示していました。ところが提示されたデザインではリンク先のページの内容の一部を画像と文字を組み合わせて表示しています。「リンク先に何があるのか」を少し見せることでユーザーのクリック、タップを誘っているわけです。
その分、１ページの情報量は増えるのでページが縦長になり、全部を見るためにはスクロールが必要になります。でも、リンク先に飛ぶよりはスクロールのほうが圧倒的に早いので、細かく分類してページの遷移を増やすよりは1ページの情報量を増やしたほうが良いようです。ページの中に、ユーザーの好奇心を誘いクリックしたりスクロールしたりする動作を促す要素を散りばめることが重要なのでしょう。
例えて言うと新デザインは、商品が魅力的に並べられたマーケットの中で、いろいろ発見しながら楽しく買い物をするイメージ。旧ページは、商品目録を手渡されてその中からほしい商品を選ぶイメージです。目的の商品が既に決まっているのなら目録から注文するのが手っ取り早いのかもしれません。でもそこにはいろいろ見て回って楽しむというユーザーの行為が欠落しているわけです。
ただこれらはいずれも「程度」の問題ではあります。「多様さ」も度を越してしまえばカオスになるし、「情報量」も多くなりすぎれば焦点がぼやけてきます。ですから多様な中にも統一感を感じさる工夫をしたり、情報量の絶妙のバランスを取っていくのが、デザイナーの腕の見せ所なのでしょう。
これに対し自分の作っていたものは、そうした視点で見れば、シンプルすぎで文字に頼りすぎの傾向があったと思います。とても勉強になりました。
実は以前、ある方から「篠原さんは文字の人ですね」と指摘されたことがあります。
今回のリニューアル作業を通し、改めてそのことを自覚させられたしだいです。
