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

21/04/12③ サイト構成を考えるよ。

　悪役令嬢継母作品、第二章が完結したためか、PV数が落ち着いてきた。

　といっても。

　私の中での異常な数値には変わらない。胃が痛い。

【現時点（2021/04/12 17:22）での状況】

　フォロー数：2,259　　（え、これ何の冗談？

　PV数：351K　　（カクヨムさん、システムバグってるよ

　★数：993　　（桁がオカシイ

　ハート数：8,122　　（怖い。見たことない数字

　大体１日の平均PV数は1万ぐらいかな……1万だってよ……1マン……今までの作品のPV全部集めたぐらいの数じゃねぇの……？

　ま……まぁ、アクセス数も落ちて来たから、そのうち1万は割るようになるって。は……ははは……

　気持ち悪くなってきた……

　でもコレね。書籍化している作品の足元にも及ばないんだよ。

　ホント、書籍化されている作品っていったいどんな事になっているのやら。

　私なら胃がもたないね。既に痛いもん。マジで。

　公式サイトとか言う前に、読んでくださる方々の為に、作品の質を上げろやって声が聞こえてきそう。え？　幻聴？

　きにしなーい！！

　私は！　私が死ぬまでの間に！　やりたい事をやるんだい！

　明日脳溢血でパタッと死ぬかもしれないんだからっ！！

　あ、悪役令嬢継母作品は、毎日更新で予約投稿設定しています。

　もし予告なく更新が途絶えたら、私が倒れたとでも思ってください（真顔

　さて。

　前回は公式サイトを作る上で、ユーザーさんに何を伝えたいのかを考えました。

　そして、そのベースとなるコンテンツのおおざっぱな種類を考えたね。

　次に必要なのは！！

　サーバ！？　CMS！？　ドメイン！？

　違うよ！！！

　先に「どんなレイアウトにするか」「どんなページ構成にするか」を決めるんだよ！！

　紙上になっ！！！

　嘘！　私はExcelとかWord使うわ。

　手書きでもいいんだけど、手書きだと書き直しとか大変だから。

　コンテンツをここに移動して～とかって、ExcelやWordのオブジェクト使った方が楽なんだよ。

　あと、ここで注意しなければならない事が１つあるよ。

　レイアウトはね。１ページにつき２つ考えるんだ。

　PC表示時とスマホ表示の２種類だよ。

　PCは画面が横長なのね。

　でもスマホは縦長じゃん？

　同じ画面を表示しようとすると、スマホ表示だとコンテンツや文字がちっちゃくなって、めっちゃ見にくくなるんだ。

　だから、PC表示の時のレイアウトと、スマホ表示の時のレイアウトをそれぞれ考えておく必要がありまーす。

　で、なんで先にそれを考えるかっていうと。

　それを決める事によって、必要な画像・アイコン等の種類と数が調査できるからです！

　それら画像類は、実際のサイトを作り込む時に必要になってくるから、事前に準備できるのが理想なんだよ！

　サイトを構築している間にアイコンを作ろうとすると、リズムが崩れて途中放棄しがちになるからね。

　よし！

　じゃあページ構成とレイアウトを決めるぞ！！！

　──と、なったとしてもさ。

　私はWEBエンジニアだけどデザイナーじゃないんだよ。

　無から有は産めないんだ……

　だからね？

　そのまま作るとね？

　クッソダッサイサイトになるんだよ！

　20年ぐらい前のサイトかよ！　って感じになるよ！！

　逆効果！！

　じゃあどうすんねん。

　それは簡単。

　ネットには、数多素敵なサイトが沢山あるじゃない。

　構成をパクるんだよ！！！

　サイト構成やレイアウトそのものには著作権ねぇからな！

　沢山色んなサイトを見て『あ！　ここいいな！』っていうのを真似すんだよ！！

　あ！！

　間違ってもアイコンとか持って来ちゃダメだからな！

　アイコンは著作権物だ！

　あくまで構成だけだぞ？！

　底辺ITエンジニアとの約束なっ！！

　というワケで。

　広大なネットの海を泳ぐ事にしました。

　闇雲に泳ぐのではキリがないので、可能であれば、ゲーム会社とか現存ラノベ作品とかの公式サイトに的を絞って行くのがいいね。

　うっかりドラクエ公式サイトを見てしまって、スライムのぬいぐるみをポチらないように気をつけろよ！！

　ふむふむ。

　複数のサイトを見てまわった結果。

　今は流行りの形があるんだな。

　載せてる画像は違うし、サイトの動きは違えども。レイアウトや構成は似たり寄ったりだった。

　なるほど理解。

　因みに、参考にしたのは以下のサイト。

　※サイトURLは転記できないのでググっておくれ。

　スクウェアエニックス:ドラクエ公式サイト

　スクウェアエニックス:オクトパストラベラー公式サイト

　カプコン:バイオハザード公式サイト

　この勇者が俺TUEEEくせに慎重すぎる:TVアニメ公式サイト

　乙女ゲームの破滅フラグしかない悪役令嬢に転生してしまった…:TVアニメ公式サイト

　あんまり、ラノベ単体の公式サイトってないんだよね。大概が、TVアニメの公式サイトとかだったりする。

　まぁ別に主催がどこでも気にしない。

　要は構成が知りたいだけだったので。

　見比べてもらうと分かるんだけど

　ページの構成が上から

　・企業名

　・基本メニュー(※折り畳み式)

　・作品タイトル名かタイトルバナー画像

　・最推しコンテンツアイコン

　・新着情報

　・コンテンツアイコン

　・フッターに企業概要やサイトマップ

　って感じ。

　基本、どのサイトもこういう構成だね。

　ここでさ。

「いや～ん。個性だした～い」

　とかいう余計な下心は全部捨てろ！！！

　個性とは、他と同じことをしてるのに「お？」と感じるものが個性だ！

　奇をてらって横スクロールサイトにしたり！　縦書きサイトにしたり！　画面を縦横無尽に移動するようなサイトにしてはならない！！！

　天才的なデザイナーがやればOKだが、そんじょそこらの底辺ITエンジニアがやったら大爆死だ！！！

　ハイ。

　というワケで、大体の構成は上記にします。

　じゃあそれを基に、用意しなければならない事を考えるよっ！！

　用意しなければならないのはコレだ！！

　・作品ヘッダーバナー画像

　・作品ロゴ画像

　・テーマカラー

　・背景画像

　・必要なら、枠区切りの罫線となる画像

　・コンテンツアイコン

　だっ！！

　少ないと感じるか！？

　ならお前は既に絵描きの仲間入りだな！

　私にとっては作品ロゴ作るだけでも至難の業だ！

　だって私はデザイナーじゃないからなっ！！！

　もう挫折しそう……なんだよ作品ロゴ画像って……どんな風に作ればいいんだよ……オシャレとは程遠い位置で生息してんだよ……さっそく心が折れるわチキショウ……

　お金がある人なら。

　デザイナーさんにロゴやバナー画像の作成を依頼する事も可能だ！

　その代わり！　ちゃんと金を払えよ！　1画像につき一万以上は最低出せよ！！

　サンプルで複数作ってもらったら、その複数分金払えよ！！　底辺ITエンジニアとの約束なっ！！

　私にはそんな余裕はねぇけどよ！！！

　だから自分で作ります……すべてゼロからの出発……全部手作り。

　ホントに作れんのかよ……

　作るしか……ない。

　じゃあどうするかってーと。

　これもググるんだよ！！

　参考になる作品ロゴなんて腐る程ネット上に転がってるからな！

　沢山見て「これがいいかも」っていうのを参考にするんだよ！

　間違ってもそのままパクるなよ！　ロゴ画像には著作権があるからなっ！！！

　ちなみに。

『タイトルロゴ　デザイン』でググると、タイトルロゴの作り方を解説してくれているサイトもあるから、それを参考にしても良いね。

　私にはそこまでの情熱、ないけどね。

　……っていうかさぁ。

　作品名の文字数が暴力的じゃん？　ロゴにしようとすると、ごちゃっとするんだよね。

　どうしたらいいんだろうか？　その場合……

　これは『乙女ゲームの破滅フラグしかない悪役令嬢に転生してしまった…』を参考にすると良いかもしれない。

　というワケで見て来た。

　あまり奇をてらった変形はさせておらず、ポイントとなる文字を大きくし、接続詞等は小さくする、という感じにしておりましたね。

　これでいいんだ……よかった。ちょっと、ほっとした。

　ってな感じでよ。

　やっていくんだよ！

　おさらい！！

　・Excel or Wordでページレイアウト概要を作る

　・そこに必要な画像を作る

　って感じだコンチキショー！！

　ここまでは調べたりするだけだったから結構サクサク進められたけど、こっから遅くなるぜェ？　画像作ったりしなきゃならんからなぁ。

　……私には、マジで、センスがないんだよ……あるんならWEBデザイナーになってたってば。

　吐きそう……

　でも頑張るよ！

　WordとかExcelとかめっちゃ活用して作っていくよ！

　センスは！　センスは期待するな！！　私はしがない底辺ITエンジニアだ！　いわばデザインのド素人だっ！！

　それでは頑張って作ってくるね。

　次の更新はいつになるのかな……（遠い目）

　以上！

　ここまで！