LIFE is 日々一歩(64)[コラム]ネットのない環境で脳内コラムを書く
── 森 和恵 ──

投稿:  著者:



こんにちは! 森和恵です。いま、これを新横浜へ向かう車中で書いています。始発で家を出たのですが、真っ暗だった空も日が昇り、きれいな朝焼けの車窓です。

新横浜駅は、横浜駅から遠いそうです。電車を乗り継いで20分ぐらい。これは想定内なので、びっくりしませんでしたけど。

新〇〇駅と〇〇駅は離れているもんだと思うのが関西人。新大阪駅と大阪駅、新神戸駅と神戸駅。思ったより離れてて失敗した経験があるはずです。(あれ? 私だけかしら?)

ちなみに、なぜ横浜へ向かっているかというと、

◎BREAKOUT SESSIONS【wb1】13:50〜14:40
《Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング》に登壇するためです。

たった50分の登壇のために、準備に費やした時間は、丸三日(72時間)ぐらい。

ほとんどのセッションが、ライブ動画配信予定だそうですので、もしお手すきでしたら、ちらりとのぞいてみてください。

【Adobe MAX Japan】
https://www.event-web.net/adobemaxjapan/


現在、車中でインターネット回線がありません。お得意のネット検索で、いろいろ調べるということができない状況です。考えた結果、今回は脳内で思いついた言葉を綴るコラムとしました。





◆ネットで検索してコラムを書くとは

普段コラムを書くときは、「何かしら役に立つ情報を」と思って書いてます。いつものわたしの記事を思い出してもらうと、参考URLがいっぱいついてますよね。

コラムのテーマを決めた後、最新のニュースから初めて、さまざまな派生の情報を調べます。それをいっぱいメモして、コラムの大筋を考えた後にまとめていくのです。

このコラムなら、A4の紙で5枚程度でしょうか? 今日はというと、2枚ぐらいに思ったことを綴って、ある程度ストーリーを決めてから書いてます。

先日、某番組で「ネット検索ばかりしているとバカになる」というくだりがありました。

「ネット検索で手軽に情報をみつける」→「検索した情報をコピペで羅列する」→「最後にちょこっと自分の意見を述べて、話をしめる」

最近の大学生の論文は、こんなふうに作られたものばかりなのだそうです。

わたしは、その番組をずっと納得いかずに見ていました。検索が悪いんじゃなくて、そのあとの情報の咀嚼をさぼるのがダメなんじゃない? と思うのです。

なんでもそうですが、情報を手に入れたら、裏付けを取って、検証して、応用してみるなりして、自分なりにかみ砕いて取り入れるようにしています。

そうじゃなければ、何の意味もないと思うのだけれど。。。

◆検索をしないで、脳内にあることだけを書いてみる

と書いてきましたが、いかんせん今日はネット検索ができません。それでは、これから登壇する予定のセッション内容について、思いを馳せてみましょうか。

今日は、Bootstrapというものについて語ります。

Bootstrapとは、HTML+CSS+JavaScriptで構成されるCSSフレームワークです。もうちょっとかみ砕くと、「HTMLページを作るときの土台」です。

Bootstrapには、HTMLページのひな型だけでなく、サイトを作るための様々なパーツがついています。パーツをBootstrap風に呼び変えると、コンポーネントです。

今日紹介するコンポーネントは、この三つです。

・レイアウトの基本枠「グリットレイアウト」
・ナビゲーションが簡単に作れる「ナビバー」
・トップページによく使うメッセージ性のある大きな写真枠「ジャンボトロン」

Dreamweaverの挿入パネルを使うと、実に簡単に組み込むことができます。コードをまったく書かなくても、ある程度の形ができちゃいます。

ただ、これだけだとだれが作っても同じデザインになっちゃいますので、オリジナルのデザインを、スタイルシートというものを使って書き加えてカスタマイズします。

と、Bootstrapを説明するときに、ほぼ10人が10人説明する話をしただけではつまらないですよね。

そこで、今回はBootstrapの利用シーンを明確に設定することに拘りました。

・中規模くらいのウェブ制作会社
・WordPressを入れるまでもない小規模案件が多い
・10万円ぐらいの価格で静的サイトを作ることがある

こういう制作会社さんがあれば「Bootstrapありきでサイト制作をしましょう」と話をすすめていきます。

Bootstrapをつかうと、同じようなページになってしまうよね……と思っているあなた。

そんなこともありません。とくに、最近はサイトデザインが画一化してきています。普段見るサイト、わりと同じようなレイアウトしてませんか?

元来、サイトのレイアウトは、ある程度共通化するべきだと思ってきました。だって、サイトによってボタンの位置や記事の配置が違ってたら、読みにくいですよね。

本や雑誌は、ある程度のルールの中でレイアウトされていますよね。

中に入る「文言、写真、フォントの形、色」などを変えることで、十分に違ったサイトに見せられていると思います。

ちょうどいまさっき、京都駅を通ってきましたが、フォームの形は大阪駅とおなじだけれど、壁面に「朱色の大きな傘を差した舞妓さんの写真」があったり、売店の壁紙が昔ながらのカルタの絵だったりすることで、京都らしさを伝えていました。

無機質ではなく、風情がそこにちゃんとありました。

ユーザーインターフェースと呼べばいいのでしょうか? 外枠の箱なんて、共通でもいいんですよ。

Bootstrapを外枠にして、ビジュアルを載せていってもいいんです。そのほうが、なにせ楽ですから。

……ということで、今回はここまで。徒然に語ったコラムなので、尻切れトンボですみません。

今日のセッションのスライド・使用したソースコードは、後日公開予定なので、よかったらわたしのTwitterをフォローしてくださいね。

まっさきに、Twitterでお知らせします。

さて、次回のお題は、MAXのお土産話もしましょうか。ではまた、次回お目にかかりましょう!(^^)

【森和恵 r360studio ウェブ系インストラクター】
mail: r360studio@gmail.com
Twitter: http://twitter.com/r360studio

講座受付中: http://r360studio.com/seminar/