Project One-SizeのWebサイトをレスポンシブデザインに

こんちわ!
Yahoo!ジオシティーズでホームページを作って、HTMLタグをコピペコピペで改造…、というころから趣味でWebサイトを作ったりしてきました。

どうも、粕谷幸司です。
あのころはハンドルネームが主流で、僕は「ブラック・マウス」→「黒ねずみ」→「くろまうす」…と、ほんのり痛々しい遍歴を辿ってきていたりします。

さて。
このたび、中澤まさとも・平居正行という2人の声優とともに展開しているユニットProject One-SizeのWebサイトをデザインリニューアルしました。

Project One-Size

たくさんの人が、いつでもどこでも、気軽にスマートフォンやタブレット端末からWebサイトを閲覧することが多くなった現代。
パソコン用にデザインされたWebサイトも「変わりなく」見ることが出来るようになったのですが。

特にファンの方など広くユーザーに目を向けると、むしろパソコンよりもスマートフォン等からの利用を優遇した方が良さそうな感じに、なってきたんですよね。

そこで。パソコンからは、パソコンらしくのびのびと広く大きく。
スマートフォン・タブレット端末からは、コンパクトにスッキリ細長く。

ひとつのページでも、見る環境によって「見え方」を変えるデザイン。
それが、レスポンシブデザインというものです。

これは…、実現できることは以前から知っていたのですが、
僕の技能ではちょっと難しいんじゃないか…、と思って手を出せなかったんです。

そんな時、ふと「レスポンシブデザインしたいんですよね~、でもアレって、JavaScript…ですよね?多分。僕、JavaScriptはちょっと…」と相談していたら。
Bootstrapってのを使ったら、サクサクッと出来ちゃうよ」と教えてもらいましてね!?

行くなら今だ、と思い、3月下旬くらいからコツコツと作業を始め。
4月1日にしれっと公開したのでした。

Bootstrapは、HTMLやCSSの基本的な知識と、JavaScriptがどんなものなのか「感覚的な理解」があれば、わりとそれを使うことは難しくなかったです。
あとは、結果的にどんな仕上がりにしたいかイメージを膨らませて…、決めた!となったら調整・調整…。

そして最終的にコンテンツ(テキストとか)を流し込んで、終わりでした。
先に考えることと、地道な作業の繰り返しが多かったので、正直わりと疲れましたが、高難度の革新!というわけでもなかったので。

仕上がりについては、皆さんもしかしたらもう見ていただけているかもしれませんが。

パソコンからだと、幅も広くてどーん!と、見えると思います。

レスポンシブデザイン

そして、タブレット端末だと、ちょっと狭まって。

タブレット端末

そしてさらに、スマートフォンだともっと細長~く。

スマートフォンでの表示

…と、この一部のキャプチャ画像では、なかなか比較がしにくいと気付きましたが。

最終的には皆さんの目で、どうなったのか確認していただければと思いますっ!

…あ、ちなみに。
「Bootstrap試してみたら?」とアドバイスをくださったのは、僕が今、アイドル関連のお仕事をしている株式会社ルーナファクトリーの社長なのですが。

結果的に…、おべんちゃら抜きで「良いもの」を作ろうとしたらルーナファクトリーのWebサイトにそっくりな感じになりました(笑)。
てへへ。

あと。
現段階では実は、解決しきれていないところが数か所あったりもするのですが。

そこは、近々、なんとかしていくので、ご愛嬌…と。

ってなわけで、改めまして。
今はエンターテイナーとしてはフリーで活動中の僕ですが。

Project One-Size | 中澤まさとも,粕谷幸司,平居正行のユニット
どうぞよろしくお願いいたします。

あと、マネージャー/ディレクター/イベンターあたりの活動もしています。
Luna Factory * 株式会社ルーナファクトリーも、
どうぞよろしくお願いいたします。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


This blog is kept spam free by WP-SpamFree.