一人で組織のウェブサイトを構築せざるを得なくなった、さあどうしよう
はじめに
フューチャー・デザイン・コンソーシアム代表の岡本です。タイトルの通り「一人で組織のウェブサイトを構築せざるを得なくなった、さあどうしよう」という人のために、お手軽にとりあえず構築する方法や、デザインを凝っていく方法、ユーザビリティにまで踏み込んで行く方法などをこれから不定期で書いとこうと思います。
ウェブで情報を発信するために、今やいろいろなツールが溢れています。SNSの広報だけでよければそれを使って終わりですが、何らかの組織の顔としてはサービス依存性が高すぎて弱いです。このnoteだともう少しメディア感が強まりますが、やはり他者のサービスです。サーバを借りて、そこが提供するWordPressなどのツールを利用すれば、比較的簡単にオシャレなウェブサイトが作れます。しかし、お手軽なツールはできることの制限が多いという問題があります。
ここでは、ウェブページの基本がわかっている人（少なくともHTMLとCSSの基本的なしくみ）が、ChatGPTに相談しながら短期間で単独のウェブサイトを構築する方法を書いていきます。ウェブページの基本までは解説しませんので、ChatGPTに「ウェブページの基本を教えて」と聞いて教わってください。必要なことを論理的かつ簡潔に教えてくれるでしょう。ちなみに、私は有料版の4oを使っているので、多少結果が違う可能性はありますが、そこまで極端には違わないと思います。
ちなみに、ホームページは和製英語で、本来の意味はブラウザの「ホーム」に設定されているページ、あるいはブラウザを開いた直後に表示されるページのことです。日常的にウェブサイトの意味で使われますが、英語にすると一部のアジア圏でしか通じません。広報担当者がオフィシャルにホームページと呼んだり書いたりすると結構恥ずかしいのでご注意ください。
あと、私はウェブサイトのデザイン・構築・運営を25年以上単独で行っているキャリアがあり（趣味サイトや研究室サイト）、当初はW3Cの仕様原理主義の立場を取り、Another HTML-lintで満点を得られるように作っていました。ウェブデザインのトレンドも追いかけ、フラットデザイン、スプリットデザイン、レスポンシブデザイン なども随時取り入れてきました。ただ、W3CがWHATWGとモメ始めたあたりから私も柔軟な立場を取りはじめ、「noteのサイトはAnother HTML-lintで-15点だからダメダメだ」なんてことは言わなくなりましたので、ご安心ください。
基本設計をする
最初にサイト全体の基本設計をしましょう。基礎知識を持っている、あるいは前節での予習が終わっていることを前提に、ウェブページは構造（HTML）と見た目（CSS）にわけて考えないといけないことを理解できているものとして書きます。個々のウェブページの集合体がウェブサイトですが、ここでは単一のウェブページからなるシンプルなウェブサイトを作ることを考えます。そのため、サイト全体と言っても、作るのは1個のhtmlファイルと1個のcssファイルとなります。
構造の基本設計
では、構造の基本設計から始めましょう。具体的にやることはコンテンツの組み立てです。このnoteを例に言うと、「大見出し（h2）」を考えることになります。これから作る組織ウェブサイト（組織サイト）のhtmlファイルの中でも、h2タグで大見出しを表示していくことになります。ただし、どのような順序にするかはよく考えないといけません。よくわからない人は、「組織のウェブサイトを作ることになったけれど、どんなコンテンツを用意すればいいかわかりません。業種は〇〇で、主な目的は△△です。必要なページや情報の構成についてアドバイスをください。」などとChatGPTに聞いてください。的確なアドバイスがもらえるでしょう。
そしてnoteだと、大見出しが作れれば目次が作れますよね。組織サイトのメニューも同様に、コンテンツの大見出しをメニューの項目に並べれば良いのです。大見出しが長い場合は、メニューの項目は短い単語に置き換えましょう。一人でウェブサイトを構築しないといけないくらいの規模の組織あるいはチームだと、そこまで豊富なコンテンツが最初からあるわけでもないでしょう。だから、そもそもメニューはなく、ただの「1枚もの」のページだけでも良いかもしれません。それも含めてサイト構造の基本設計となります。
見た目の基本設計
次は、見た目の基本設計です。見た目を「デザイン」と言い換えたくなるかもしれませんが、そもそもデザインには設計するという意味があるため、「デザインの設計」と言ってしまうと「頭痛が痛い」みたいな表現になってしまいます。さらに脱線すると、よく見かける「※画像はイメージです」もおかしな表現です。「ここに掲載した画像は、実際の商品とは異なる場合があります」という厳密性を問題にした箇所なのに、その断り書きが想像を働かせないと理解できないのは本末転倒でしょう。
閑話休題。見た目で重要なのは、レイアウトとフォント（種類・サイズ）と配色です。ウェブページでは、それぞれの要素をそれぞれボックスと見立て、そのボックスをどのように配置していくかという考え方でレイアウトを組んでいきます。特に、主要コンテンツの表示領域（通常は画面中央）と、空白領域（画面上下左右のスペース）のバランスは重要ですので、微調整して決めることになると思っておいてください。また、その際にできるだけ絶対値（800pxとか）では決めないほうが望ましいです。ブラウザのウィンドウサイズやPCの画面の解像度設定、タブレットやスマホなど、ウェブサイトを見る環境は人によって大きく異なりますので、相対値（80%など）で決めたほうがいいです。よくわからなければ、ChatGPTに「CSSの単位について知りたいです。絶対値（pxなど）と相対値（em, rem, % など）の違いや使い分けを初心者向けにわかりやすく教えてください。」などと聞きましょう。
フォントに独自性を出すなら、人によって大きく異なる環境で表示することを踏まえたうえでフォントを選び、その設定を書いていくことになります。これはなかなか高度な知識やスキルを必要とするので、とりあえずはChatGPTにお任せすることとにし、この時点での基本設計はペンディングにしておきます。
ウェブサイトに独自性を出すなら、レイアウトと同様に配色も極めて重要になってきます。印象的な画像を背景にどかーんと配置して独自性を出す、ということも可能ですが、その画像を作るにも時間と手間がかかりますので、まずは配色のみを考えましょう。全体の背景色、見出しの文字色（ボックス風にするなら、背景色や輪郭色も）、地の文の文字色、リンクの文字色は最低限必要でしょう。この配色を決めるのも至難の業で、通常は試行錯誤しながら決めていきます。とりあえず全体の雰囲気やテーマカラーだけを決めておいて、それを伝えてChatGPTに作ってもらうこともできます。
自分で作る場合でもChatGPTに作ってもらう場合でも、配色は見た目だけでなく、視認性もよく考えてください。私たちが持つ色覚には、概ね4つのタイプの多様性があることが知られていますので、自分の見えだけで決めてしまうのは不十分です（ヒトにはなぜこのような色覚多様性があるのか、他の動物の色覚はどうか、などの話は別途余裕があれば書きます。私の授業が受講できる人はそちらで）。その確認のために、スマホアプリの「色のシミュレータ」をおすすめしておきます。
サンプルページの生成
ここまでくれば、ChatGPTにサンプルページを生成してもらいましょう。例えば、次のようなことを書けば、ChatGPTはすぐにサンプルページを作ってくれます（実は、以下の依頼文自体もChatGPTに書かせました）。
地域コミュニティの活動を紹介する単一ページのサイトを作りたいです。
・組織の種類：地域コミュニティ（環境保護団体）
・サイトの目的：活動内容を紹介し、ボランティアを募る
・必要なセクション：ヘッダー、活動紹介、参加方法、イベント情報、お問い合わせフォーム、フッター
・デザインのイメージ：ナチュラルで親しみやすいデザイン
・使用技術：HTMLとCSSのみ
この内容でサンプルページを作ってもらえますか？
必要なセクションには「構造の基本設計」を盛り込んでください。これまで日本語の表現について散々言ってきたことをガン無視しているみたいですが、デザインのイメージには「見た目の基本設計」で決めたことも盛り込んでください。決めあぐねているなら「ナチュラルで親しみやすいデザイン」のように大雑把な雰囲気だけでもそれなりに作ってくれます。
今回はここまで。次回はこのサンプルページをどう修正していくか、という話をしましょう。