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