Koji / こーさんTech

日々是々、学習していることをオープンに書きます!

〜Webサイト制作を始める〜 まずは調査から

こんばんは!みつはる です。

 

はじめに

西野灯さんより、活動記録をまとめられるWebサイトを作りたいというご要望を頂きました。そして、トオルさんより東海オンエアりょうさんがやっているカフェのホームページみたいな感じが良いというお話を受けました。

note.com

note.com

私の背景

私のWebサイト制作経験と言いますと、中学生のときに超簡単なゲーム攻略サイトYahoo!ジオシティーズで作っていました。今はもう無くなってしまいましたが、いい思い出です。あと、大学生の時にHTML,CSSの基礎的な授業がありました。会社員になってからは、本当にごくわずかしか触っていません。Webサイト制作は主軸ではまったくなく、とある業界向けパッケージソフト開発、導入カスタマイズに従事しております。Webサイト制作の実践は初心者です。。なので、良い学びにさせて頂こうと思います。

 

東海オンエアりょうさんのカフェ

というわけで、まずはりょうさんのホームページを拝見しました。

www.rcoffeestand.com

あのー‥すごすぎないですか?

シンプルながらオシャレの極みみたいなやつじゃないですか笑

さすができる人間は違うなぁ‥と思いました。

www.youtube.com

 

個人的観測で、シンプルで簡単そうに見えるものほど難しい‥という予感がしております。

 

製作者さんを調べました。実績がすごすぎて顎が外れそうです。。

twitter.com

 

調査開始

まずは、何で作られているのか?を調べようと思いました。下記サイトを参考に、WordPlessかどうか?を調べたところヒットしませんでした。うぉぉ、テーマを調べる手段を失った‥。次にChrome開発者機能でソースコードも拝見しました。はい、テーマらしき文字はまったくありませんでした。手がかりがつかめず‥

tcd-theme.com

 

しょうがない。似たテーマを探そうと思いました。

「wordpless テーマ オシャレ」「wordpless テーマ スクロール」「wordpless テーマ  パララックス」とかいくつかの検索言語を打ち込んでみました。

 

そこで、2つ似た感じのテーマを発掘しました。

isotype.blue

crestaproject.com

 

ふむふむ、このあたりのテーマを使えば、似た雰囲気のサイトは作れそうだなと思いました。あとは、写真がゆっくりとフェードインする感じのモーション、写真の切り替えのあたりは一体どうなっているのやら‥と思いつつ1日が終了しました。

参考にしたいサイト

似た感じのサイトを探していたところ、デンソーの企業サイトにたどり着きました。

あのー‥さらにすごすぎて驚きました。企業ブランドサイトが本気すぎる‥と感じました。プロ中のプロ集団が手掛けたのだろう‥と思います。エッセンスはなんとか取り入れたいですね。

brand.denso.com

ついでに、私の個人的な好みとしてBUMP OF CHICKENのようなサイトも良いなぁと思ったりしています。

www.bumpofchicken.com

そもそもWebサイトを持つ意味とは?

誰にも見向きされない、活用されなければまったく存在する理由がなくなってしまうとふと思いました。存在するからには、何かしら存在理由とか、提供できる価値、受け手にとって贈り物でありたいですね。もっと言いますと、ただの活動記録ならば、既存のブログ作成サイト(はてなブログ、LINEブログ等)は無限にあります。その方が手軽で簡単でハッピーかも?なので、いま依頼者の意図はよく汲み取れていないかも‥。

 

私なりに解釈するならば、

「情報をわかりやすく整理する」

「欲しい情報によりアクセスしやすくなる」

「求めているものを提供する」

このあたりがWebサイトを作る強みとか価値になると考えます。既存のブログサービスよりも、無限にいじって遊べるどん、状態になります。(※難易度:高)


noteのサービスはSNS的な意味合いが強い気がしていまして、

こと検索性や一覽性は弱い設計なのかと思っています。デザインもいじれないので、とにかく文字で勝負!な感じがあります。そこをカバーできたら良いのかな?と思っています。

 

作ったけど、全然役に立たない‥となったら目もあてられないな‥とビビっています笑

と言っても、すくんでたら始まらないので歩きながら考えよう、なにごとも練習や!という気持ちでいます。

 

今日はそんなところです。