底辺ITエンジニアの底辺人生のアレとコレとソレ

23/04/08 自作サイトに四苦八苦しとる。

　前回言ったように、今は自作サイトのリニューアルを検討している。

　今ある自作サイトは、クッソダサい。

　我ながら自分のセンスの無さに絶望する……

　なので、『WEBサイト　配色』でググって、オシャレな色配置を片っ端から調べていた。

　が。

　そもそも、私には色のセンスがない為、どの色を使ったらいいか分からん。

　取り敢えず、好きな色を一色選択し、配色シミュレーションサイトで、その色に合う色んな候補を出してもらって、そこから選んだ。

　配色はこれでいいとして。

　問題はレイアウトセンスだ。

　これが絶望的にない。

　勿論、ゼロから生むつもりは毛頭ない。

　なので、オシャレサイトのサンプルを片っ端から見て回った。

　しかし。

　色々見てて気づいてもーた。

　私には、コンセプトがないのだ。

　何かを作る時には、必ずコンセプトを持たせた方がいい。

　それにより、見た人に伝えたい感情や思って欲しい気持ちを表現する。

　前回、自作サイトを作った時、コンセプトなしで取り敢えず構築してった。

　そのせいでクッソダサくなったのだ。

　コンセプトは必要だ。

　小説にも持たせてるんだから、自作サイトにも持たせた方がいい。

　その方が、コンテンツの『見せ方』が決まるから。

　じゃあコンセプトを決めよう。

　と、思った場合が。

　……え？　どうやって決めんの？

　小説ならすぐに思いつくんだよ。

　なのにWEBサイトのは全然思いつけないんだよ！

　って事で、困った時はGoogle様！

　凄いよね。WEBサイトのコンセプトの決め方とかも、教えてくれるサイトがあるんだもん。

　んで。

　見た結果。

『このサイトで来訪者に何を伝えたいか』がコンセプトを決める為に必要だそうな。

　サイトの来訪者に伝えたい事……？

　あんまり考えてなかったな……

　でも、そもそもサイトを作るということは、誰かに何かを見せたいから、だ。

　WEBサイトは情報伝達の手段やからな。

　そもそも私がサイトを作りたかったのは──

　① カクヨムでは画像が表示できないから

　② Amazon等へのリンクが貼れないから

　③ 文字情報だけでは伝えられない、『xxのやり方』などを、図解しながら説明できたら、と思ったから

　です。

　そう。

　ただ

　カクヨムでは出来ないことをしたかっただけ。

　そこにコンセプトなんぞない。

　私に足りないのは

『それは、何の為にやりたいのか？』

　という視点。

　そんなモン全然考えてなかったよ……

　って事で。

　他人が作っている個人サイトを参考にしようかと思って、色々調べてみた。

　がァ。

　インターネット黎明期の、個人サイトだらけだった時代ならいざ知らず。

　現在、ブログ以外で自作サイトを持ってる個人なんて、あんまおらんねん。

　フリーランスで仕事をしている人とかは、結構個人サイトを待ってるが──それは個人事業主が運営してる、ぶっちゃけ企業サイトのようなものだ。

　参考にならない。

　フリーランスの人のサイトは、基本仕事を取る為にあるものだから。ポートフォリオとか、今までの仕事の事とか、そういうのが載ってる。

　私は、仕事が欲しくてサイトをやる訳じゃない。

　うーむ……

　コンセプトが近いサイトとしては、一人で無料PCゲームとかを使ってる人とかかな。

　その人たちの目的はわかりやすい。

　ゲームを沢山の人に遊んで欲しいのだ。

　だから、自作ゲームの広告サイトのようになっているし、自作ゲームの公式サイトのような作りになってる。

　──って事は、個人事業主のサイトとあまり変わらないか。個人事業主は、自分を広告してるようなサイトだし。

　私も、ソレでいいのではないか？

　自分の小説を広告する為のサイト。

　本を買ってもらったり、カクヨムのを読んでもらう為のサイト。

　だとしたら。

　ここはそういうサイトだと分からないとダメだね。

　いくら見た目がオシャレだとしても、サイトに来てみたのに、ここが何のサイトなのか分からないと意味がない。（おしゃれサイトの中には、そういうサイトも結構ある）

　カクヨムでメイン活動中のアマチュア作家の、広告サイトだよ、というのを最初に明示しなければならない。

　ふむ……

　だとしたら？？

　サイトトップページの一番上、みんなが一番最初に見るページは、そういう情報が日本語で分かりやすく説明が必要、と。

　なるほどなるほど。

　ただし、ただ説明があるだけではダメだ。

　色気がない。

　画像が必要だ。ヘッダー画像が。ヘッダーロゴとは別の、何かが。

　えー……絵を描くのはちょっと……

　ぶっちゃけちょっと面倒くさい……

　フリーの画像ダウンロードサイトにある写真で、なんとか誤魔化せないかなぁ……

　私はゴテゴテしいサイトよりも、シンプルなサイトの方が好きだしィ……

　うーん……

　センスがないので、どうしたらどうなるのか、全然イメージが出来ず……

　センス、欲しい……

　その時、ふと気づいたのは、前のサイトのロゴだった。

　なんでそうしようと思ったのか忘れたけれど、私のサイトのロゴはバーコードなのだ。しかも、なんちゃってではなく、ちゃんと読むとサイト名である「INOVELT.NET」と表示されるものだ。

　コレだ。

　ってことで、以前使っていたバーコードをそのままサイトヘッダーに持ってくる事にした。

　が。

　以前作成したバーコード画像は、ちょっと画像が粗く、しかも、私があまり好きじゃないグラデーションが入っている。

　知ってる？

　グラデーションとかってね。センスある人がやらないと、25年近く前のサイトみたいな古代な雰囲気を醸ししちゃうんだよ。

　ってことで、バーコードを作り直すことに。

　英数字や記号を出力できるバーコードはCODE39だ。

　ってことで、CODE39を出力してくれるフリーサイトでバーコードを作成。

　ちなみに。

　そのサイトはデザインサイトではない。

　工業用バーコードをフリーで出力してくれるサイトだった。

　いいんだよ。

　CODE39のバーコードを画像出力してくれればそれでいいんだから。

　ってことで、ロゴはコレでいい。

　次に。

　サイトの配色問題。

　使う色は決めたけれど、どの色をどの部分に使うのかまではまだ決めてなかった。

　ちなみに、最初に決めた色はやめた。

　好きだったんだけど、よく見たらスパイファミリーの表紙背景色と似てたから。

「真似かよwww」と難癖つけられるのは避けたい。

　最近のインターネット界隈では、他人に難癖をつけるのを楽しみにしている人が多いようなので。Twitter界隈だけの話かもしれないけれど。

　どのみち、豆乳メンタルの私は、難癖つけられる可能性があるものは出来るだけ減らしたい。

　ってことね。

　基本カラーは、私が好きなブルーグレー。（※グリーングレーにしようとしてやめた）

　この色をメインで使っていきたいが……

　問題はどこに使うのか。

　WEBサイトの基本背景色は白だ。コレは実際のところブラウザ依存なんだけど、特殊なブラウザを利用せず、何も指定していなければ表示されるのは白。

　無難だ。

　背景色を白にして、メニューなどのコンテンツにブルーグレーを使えばいい。

　が。

　それじゃつまらんな、と。

　いや分かってるよ！

　センスがない人間が下手な事をするから更にクソダサくなるってことは！

　でも、試してみたかったんだよ、自分のポテンシャルを。

　ってことで、背景色をブルーグレー、基本文字色を白にした。

　パステル系の色をベタ塗りにしたり、黒を背景色にすると、それは古（いにしえ）のサイトと同じになる。

　なのでグレー系の色を背景色とした。

　アクセントカラーは小豆（あずき）色系。あと二色は黄土色系とブラウン系にした。

　大丈夫、シミュレーションサイトで色候補として出してきてくれたものだから、組み合わせとして悪いものではない、はず。多分。知らん。

　前回のサイトのクソダサさを反省して、今回のサイトは以下の事をルールとする事とする。

　① 情報の詰め込み過ぎに注意

　コレは、サイト初心者がよくやってしまう間違いなんだけれど、1ページに情報を詰め込みすぎると、何が本当に大事な情報なのか分からなくなってしまうんですよ。

　なので、トップページに掲示する情報量が多くなりすぎないように気をつけることとする。

　② 情報がなさすぎてもNG

　コレは、以前の私のサイトがそうだった。

　あまり載せる情報がなかったので、特にトップページがガラガラだった。

　情報が多すぎても目が滑るのでダメだけれど、少なすぎてもダメなのだ。

　③ 情報を掲示する時には、左右に余白を持たせること

　コレは古（いにしえ）のサイトでよくあったが、文字や画像がブラウザの左右にくっつくぐらいだと、ちょっと横幅が長すぎるのだ。

　1つの情報のまとまりを掲示する時は、必ず左右に余白を持たせることとする

　④ アイコン画像やサムネイル画像を使用すること

　古（いにしえ）のサイトだと、リンクが文字である事が多い。

　リンク文字ももちろん必要だけれども、最近の流行として、リンクは文字よりアイコン、もしくは文字も含んだカード（コンテンツ）にしたほうがいいみたい。

　⑤ 文字情報は控え目に

　私は文字を羅列するのが好きなので、コッテリ文字を書いてしまうのだが、それだと目が滑る。

　なので、出来るだけ文章は簡素にして、かつ、ブロックに分けて余白を持たせ、一度に目に入ってくる文字情報量をなるべく減らす。

　⑥ スマホで見た時のレイアウトの方を重要視する。

　今は殆どの人が、サイトを参照する時にスマホを利用している。

　大体7割ぐらいだ。コレは実測値である。どこの、っていうのは言えないけれど。

　結構多いのだけれど、パソコンで見た時のサイトはオシャレなのに、スマホで見ると見難い、オシャレでもなくなってしまうサイト。

　そうならないように気をつけよう。

　⑦ サイトに動きやアニメーションするものは出来るだけ置かない

　コレは完全に私の趣味である。

　ぬるぬる動くサイトとかあるよね。下にスクロールさせると、サイドからフレームインしてきたり、ふわっと浮いてきたり、とか。

　アレ、ワシ、嫌いやねん。

　そのふわっと動く約1秒、フレームインしてくる約1秒、その動きが無駄に感じてしまうのだ。

　コレは完全に趣味である。私がそういうサイトが嫌いなだけだ。

　ただし、スマホ表示した時、どうしてもメニュー表示が邪魔になってしまう為、ドロップダウンリスト等は可とする。

　とりあえず、上記をルールとして、あとはサイト上にコンテンツをそれぞれ配置してく事となる。

　……ぶっちゃけ、WEBサイトっていうのは、見た目も勿論大事なんだけれど、もっと大事なのは中身。載ってる情報、コンテンツですよ。

　載せる情報が少な過ぎると、人はその存在を無意味に感じる。

　見た人が「損した」と思わないぐらいの情報量は必要だ。

　そのためには、サイトを構築する前に、まず載せる情報の原稿を書いたり、かつ、サイト上のページ構成を決める必要がある。

　どこのページにどんな情報が載っているか、そしてページ構成がどうなっていて、どうツリー構造になってるのか。

　コレも、サイトを実装する前に予（あらかじ）め決めておく必要がある。

　そして。

　それと同時に。

　情報を掲示する時のブロック（コンテンツ・カード）をどんなデザインにするか。

　メニューのデザイン、ドロップダウンにするのかしないのか、タイトル行はどんなデザインにするのか、そういった事も決めていく必要がある。

　サイト1つ作るよってなっても、色々決めておかなければならない事があるんだよ。

　つか、やる事多いっ！！

　でも、近道はないので、一つずつ片付けていこう。

　掲示する情報の原稿は……そうだな、まずはWordで作ろう。

　そこで体裁なども一緒に決めて、決まってから実サイトを構築していこう。

　って事で。

　取り敢えずエッセイはここまでとして、サイトに関わるアレコレやってくるわ。

　今回は以上！

　それではね！