ホームページ準備中
※トップ絵は以前にSpellaiに描いていただいた絵なんですが、プロンプトとか忘れました。
電卓の形が怪しいんですけど、なんか面白いですね。
ざっくりとではありますが
昨日の午後くらいから、ガチャガチャとホームページを作っていましたが、ざっくりとできたので、ご報告です。
まだ制作事例とか掲載してませんし、メールフォームのテストもできてないんですけどね（ﾃﾍﾍ
で、この記事では、どんな風にホームページを制作したかを、まとめてみようと思います。
どんなホームページにするか？
まず、最初に考えたのは「どんなホームページを作るか」なんですが、現在の状況について把握する必要がありました。
何処にホームページを作るか？
ヘテムルというレンタルサーバーをかなり長く契約し続けていて、まだしばらくは使用料の前払い分がある（確認したら、来年の二月頃まで）ので、そこに設置すればいいと考えた。
独自ドメインはどうするか？
一昨年くらいに取得したUSACO.MEという独自ドメインが宙に浮いていた（本当は旅を題材にした車載動画を制作しようかと考えていて、その活動報告に使う予定だった）ので、それを使うことにした。
CMSを使うか否か？
WordpressなどのCMSを導入するのも考えたが、CMSをインストールしたり諸々の設定を変更したりなど、面倒くさい気がしてきたので、キーボードを叩き続けてガチャガチャ作ったほうが、早く完成するような気がした。
今回は、とにかく早く作って、作品を掲載できるようにしないと意味がないと思ったので、思いつく中で最短で作る方法に従った。
フレームワークやテンプレートを使うか？
今の僕の実力では、ゼロからコーディングしてホームページを制作するのは工数的に正直むずかしい（いやもうロートルなので）というのもあって、Bootstrapを導入している無料のテンプレート「Titan」を使わせていただいた。
海外製のテンプレートは日本語のページで利用すると、タイポグラフィ関係に違和感が出てくる（デザインが崩れることが多い）のですが、まあいろいろなギミックを素のBootstrapから作っていうのもしんどいので、時短という意味でもこうしたテンプレートはありがたいものなので、制作者に感謝して利用させて頂いた。
内容はどの程度にするか？
とりあえず、受注可能なものとその価格がわかることが第一で、その他には自分のことであったり制作事例だったり、ポリシー的なものがわかればいいかな程度で制作を始めた。
制作を進める
それでは、今回はどのように制作していったかというと、基本的にブラウザで現在の状況を確認しながら、テキストエディタでHTMLやCSSを修正して、再度ブラウザで確認して……という、非常に初歩的で単純な方法で制作しました。
構造を入れ替える
まずは上からどんな風に内容が並んでいれば良いかを考えつつ、テンプレートの内容を、その順番に入れ替える。
ホームページの内容は、sectionタグごとにパートに分かれているので、間違わないようにコピペして入れ替えて、不要なパートは削除する。
斜体のフォントは正体に
海外製のテンプレートで多いのが、見出し下の文章に斜体を選択している事が多く、日本語をそのまま入力していくと、なんだか違和感が酷くなってしまう（日本語のフォントは基本的に斜体専用のフォントがないし、画数も多いので斜体にすると読みづらかったりする）ので、その部分を正体に設定し直した。
文章を書く
で、文章を書いていくわけだが、この手のホームページの場合は、長々と文章を書かないようにデザインされているので、できる限り簡潔にまとめて、不明な点はメールなどで問い合わせてもらえるように、最下層のメールフォームに設置して「お気軽にご相談下さい」的な体裁にした。
ページ上のアイコンなど
テンプレートの中で準備されている鉛筆や電球、ブラシや吹き出しといったアイコンは、ピッタリ必要なものがあるかが微妙だったので、利用できるところは使い、できないところは削除して、スペースの調整を行う。
背景のあしらい
テンプレートには、ページ内に背景に画像を配置している部分（例えばページの上部の画像など）と空白の部分、色だけついている部分と数種類のパターンがあったが、一旦Spellaiで過去に制作した画像を加工して、すべての場所に配置してみた。
改めてみると、少々くどいので、あとで調整予定。
メールフォームの設定
テンプレートに付属しているメール送信のプログラムは、マルチバイトに対応していなかったので、その部分を修正して、送信テストをしてみる。
とりあえずメールは送信できそうだ。
あとでやろうと思ったこと
以上、制作したことについて書いてみた。
以下は、後々準備していこうと思っていることを書いていく。
Faviconやサムネ画像の設定
GIMPやInkscapeの練習がてら、Faviconやサムネの画像を作る。
制作事例の掲載と解説
制作が可能なもののサンプルとして、架空の制作事例を実際に作って、その事例についての記事をnoteに書いて、ホームページからリンクをする形式で公開しようと考えている。
その他画像の追加
制作事例もそうだが、その他にもサービス内容についてイメージで補完できそうな画像を作成して掲載しようと考えている。
METAタグ関連の設定
検索エンジンに拾ってもらうための文章やキーワードを吟味して、ソースコードに記載したい。
制作した感想
久しぶりに手を動かして「ああ鈍ってんなー」って思いつつも、楽しくて楽しくて仕方がなかった。
仕事でホームページを作るためにコーディングをしていた頃は、しんどいと感じることのほうが多かったけれど、今回はブラウザをリロードして確認するたびにワクワクしている自分がいて、「やっぱり、こういうことでお金を稼いで生活したかったなぁ」という、後悔にも似た感情が湧き上がってきた。
流石に今の僕には、現役の頃のような働きはできないので、専業で制作をすることはできないのだけれど、とりあえず頑張って、様々な人の力になれればいいなと思う。
……で、この記事では制作した内容について、ざっくりとしか説明していないので、もっと細かいことが気になる方は、ホームページからお問い合わせいただくか、コメントしていただければありがたいです。ハイ。
いいなと思ったら応援しよう！
