こんちわ！
Yahoo!ジオシティーズでホームページを作って、HTMLタグをコピペコピペで改造…、というころから趣味でWebサイトを作ったりしてきました。
どうも、粕谷幸司です。
あのころはハンドルネームが主流で、僕は「ブラック・マウス」→「黒ねずみ」→「くろまうす」…と、ほんのり痛々しい遍歴を辿ってきていたりします。
さて。
このたび、中澤まさとも・平居正行という2人の声優とともに展開しているユニットProject One-SizeのWebサイトをデザインリニューアルしました。
たくさんの人が、いつでもどこでも、気軽にスマートフォンやタブレット端末からWebサイトを閲覧することが多くなった現代。
パソコン用にデザインされたWebサイトも「変わりなく」見ることが出来るようになったのですが。
特にファンの方など広くユーザーに目を向けると、むしろパソコンよりもスマートフォン等からの利用を優遇した方が良さそうな感じに、なってきたんですよね。
そこで。パソコンからは、パソコンらしくのびのびと広く大きく。
スマートフォン・タブレット端末からは、コンパクトにスッキリ細長く。
ひとつのページでも、見る環境によって「見え方」を変えるデザイン。
それが、レスポンシブデザインというものです。
これは…、実現できることは以前から知っていたのですが、
僕の技能ではちょっと難しいんじゃないか…、と思って手を出せなかったんです。
そんな時、ふと「レスポンシブデザインしたいんですよね～、でもアレって、JavaScript…ですよね？多分。僕、JavaScriptはちょっと…」と相談していたら。
「Bootstrapってのを使ったら、サクサクッと出来ちゃうよ」と教えてもらいましてね！？
行くなら今だ、と思い、3月下旬くらいからコツコツと作業を始め。
4月1日にしれっと公開したのでした。
【Webサイトデザインをリニューアルしたよ】
Project One-Size | 中澤まさとも,粕谷幸司,平居正行のユニット http://t.co/OAVt6fMcjOiPhoneやAndroidなどスマートフォンでも、iPadやKindleなどタブレットでも…、きっと。
— 粕谷幸司 (@KASUYA_net) March 31, 2015
Bootstrapは、HTMLやCSSの基本的な知識と、JavaScriptがどんなものなのか「感覚的な理解」があれば、わりとそれを使うことは難しくなかったです。
あとは、結果的にどんな仕上がりにしたいかイメージを膨らませて…、決めた！となったら調整・調整…。
そして最終的にコンテンツ（テキストとか）を流し込んで、終わりでした。
先に考えることと、地道な作業の繰り返しが多かったので、正直わりと疲れましたが、高難度の革新！というわけでもなかったので。
仕上がりについては、皆さんもしかしたらもう見ていただけているかもしれませんが。
パソコンからだと、幅も広くてどーん！と、見えると思います。
▼
そして、タブレット端末だと、ちょっと狭まって。
▼
そしてさらに、スマートフォンだともっと細長～く。
▼
…と、この一部のキャプチャ画像では、なかなか比較がしにくいと気付きましたが。
最終的には皆さんの目で、どうなったのか確認していただければと思いますっ！
…あ、ちなみに。
「Bootstrap試してみたら？」とアドバイスをくださったのは、僕が今、アイドル関連のお仕事をしている株式会社ルーナファクトリーの社長なのですが。
結果的に…、おべんちゃら抜きで「良いもの」を作ろうとしたらルーナファクトリーのWebサイトにそっくりな感じになりました（笑）。
てへへ。
あと。
現段階では実は、解決しきれていないところが数か所あったりもするのですが。
そこは、近々、なんとかしていくので、ご愛嬌…と。
ってなわけで、改めまして。
今はエンターテイナーとしてはフリーで活動中の僕ですが。
Project One-Size | 中澤まさとも,粕谷幸司,平居正行のユニット
どうぞよろしくお願いいたします。
あと、マネージャー／ディレクター／イベンターあたりの活動もしています。
Luna Factory * 株式会社ルーナファクトリーも、
どうぞよろしくお願いいたします。
コメント