昨年、2022年の7月某日、Webサイト制作の第一歩目となるINFINITI GLASS WORKS様との打ち合わせが始まりました。
初めは、私もWebサイト制作について制作過程も何もかもわからず手探りの状態でした。
今日お伝えするのは、制作着手から公開・リリースまでの道のりについて簡単にではありますが、ご紹介させてください。
まず、今回のWebサイト制作はすべて無料で行っております。
Webサイト制作者の方はご存じの方がほとんどだと思いますが、今回デザイン費用等のみ無料で制作を行っており、基本的な年会費や維持管理費については別途お支払いいただいている形です。
と言っても維持管理費もいただいていないので、ほぼサーバー代・ドメイン代と言うような形でしょうか？
サーバー代やドメイン代って何？というかたは、今回はWebサイトの制作過程ということなので申し訳ないのですが、省きます、すみません。
近いうちに解説用として別に記事か動画などを作成させていただきます。その際には下記にリンクを添付しておきます。↓
URL :
【00/00/00追記】
さて本題に戻りますが、実際にどのような手順となるかと言いますと
まずは、打ち合わせでした。何を打ち合わせしたらよいのかということにもなりかねないため、基本的には質問内容等はあらかじめPickUpしておき、打ち合わせの際に聞かなければならないことはメモをしておくようにしておりました。
それを踏まえたうえで、最初につまずいたのはサイトの全体デザインについてです。
Webデザイナーの方であると正式な進め方は本来Topページのデザインから決めるものではないとすぐにお分かりいただけると思います。
ですが、クライアント様からしたらやはり、「自分のサイトがどのような形になるのか」というのはきになるところではないでしょうか？
そこで、今回はサイト全体のイメージのすり合わせを兼ねた、サイトデザイン選定を先に行いました。
具体的には、参考するサイトを決定し、決定したサイトをもとに制作を行う形を今回取ってみました。
【参考】
サイトデザイン : https://sankoudesign.com/
参考にするサイトはこちらの↑の「SANKO」というサイトよりデザイン・レイアウトを決定し、Webサイト制作に着手しました。
こちらの「SANKO」をもとにクライアント様に選んでいただいたサイトをもとに実際に制作するサイトのワイヤーフレームを作成しました。
【参考】
ワイヤーフレーム : https://coosy.co.jp/blog/article06/
このように写真や文字は挿入せずにレイアウトや構図を決めます。この時の形は、「SANKO」のサイトで選んでいただいたものと同じように作成しました。
ワイヤーフレームを作成後には、実際にサイト制作に入っていきます。
今回はサーバーやドメインの設定は済んだものとして、進めていきます。
Webサイトを作るといってもいきなり、まっさらなところから作る方法もありますが、
今回はクライアント様より「自分たちでの記事やNewsを書きたい（発信したい）」とのご意見をいただいておりましたので、CMSを活用してWebサイト制作を行いました。
CMS：[ Contents Management System ] コンテンツ管理システム
今回はCMSについての説明も省かせていただきます。CMSについての解説も行い次第URLを添付いたします。
URL :
【00/00/00追記】
さて、話を戻しますが、今回は「Joomla!」というCMSを活用します！
Webサイトを制作される方でももしかしたらあまり耳なじみのないCMSかもしれませんが世界シェアではTOP10に入る優秀なCMSであることは間違いありません。
この「Joomla!」を活用して記事の作成や写真・動画・連絡フォームなどの作成を行います。
「Joomla!」の使用方法についても次回以降の記事にてご紹介させていただきます。
URL :
【00/00/00追記】
「Joomla!」の説明はさておき、Webサイト制作の過程ですが、サイト制作においてコンテンツ（写真や動画、その他画像などの情報）というものが多く必要になります。
今回は写真をメインに使用したサイトデザインを希望されていましたので実際にカメラで撮影に向かいました。
撮影時期が夏から秋にかけての時期だったため半袖でしたが光の関係上、自然光が入ってしまうと不自然な反射光が入ってしまうため完全に締め切った環境での撮影でした。
Webデザインを始める前にはカメラでの活動を本格的に行っていましたが、ガラスの撮影というものはとても難しかったです。
良ければ写真のサイトも見ていただければ幸いです。
"Nao Photo"
URL : https://www.nao-info.com/
こうして撮影を終え、撮影日に撮影した写真以前のデータもいただき、選定とレタッチを行います。
これがまた大量で合計で7,000枚ほどだったでしょうか。
サイト制作の中で選定とレタッチに一番、時間を要したと思います。
ワイヤーフレームをもとにレイアウトを完成させ写真の挿入を行いましたが、ここで意外と重要だと私自身感じたことが、コンテンツの整理でした。
こちらの画面はJoomla!での画面ですが、
このようにフォルダをたくさん作りすぎてしまうとどこに何をしまったのかが分からなくなってしまうため、
フォルダでの整理の取り決めしました。
- サイトメニューごとにフォルダを作成
- 一つのメニューの中にページを構成しているカラムごとのフォルダを作成（スライドショーなどを使用する場合の為）
- 2で作成したフォルダに必要なコンテンツのみアップロードを行う
このような取り決めを行うと後々、自分が見る時にも見やすくでき、もし他人が操作する場合には
このようにフォルダを分けているととても操作しやすくなります。
こうして、デザインとレイアウト、写真の挿入が終わると最後に文章の差し込みが必要になります。
今回はクライアント様に依頼する形となりました。
通常であれば文章校正を行う、構成作家を含めてサイトを構成していくのですが、
今回は無料ということもありできることは自ら行いました。
文章の修正も何度も読み返し、第3者にも確認してもらうなどして無事に挿入を終えました。
かなり端折って説明したことであまり伝えられていないこともありますが、
それは、個別に追々綴っていきたいと思います。
今回のWebサイトは初回にしてはかなり完成度の高いものに仕上げることができたと私自身思っております。
今後もサイトのコンテンツや新しいものの更新を予定しておりますのでお楽しみください。
それでは、今日はここまでにしておきたいと思います。
Nao
INFINITI GLASS WORKS
URL : https://infiniti-glass.com/
production : Nao, Tomoki Miyajima
photographing : Nao, Tomoki Miyajima,
Maiko Honda, INFINITI GLASS WORKS
Article Author : Nao
