5/1(Wed)
東京芸術大学美術学部卒。1995年にWebデザインを始める。制作会社、コンサルティング会社を経て2000年に独立。一部上場企業のWeb戦略コンサルティングから町のお菓子屋さんのWebサイトまで、世の中のあらゆるタイプのWebサイト開発プロジェクトに携わってきた。 フリーランスを目指すWebデザイナーの育成とフリーランスwebデザイナーのスキルアップと情報共有、と仕事の供給などを中心に活動するワークシェアリング組織「国際Webデザイナーズ協会」を立ち上げ準備中。 【夏本健司オフィシャルWebサイト】
Bootstrapを使ったWebサイトの開発手順を事例をもとに実演します。これを見れば明日からBootstrapを使ってサクサクページが作れるようになります。 コーディングをする際に使える便利ツールやデザインパターンなどについても詳しく解説をします。 後半はトピックとして、効率的な「スキルアップ」の仕方についての実践方法をお話しします。 フォローページを開設しました 本授業で使用しているフリップが画面構成上読みづらいので、同内容をテキスト起こしました。生放送をご覧頂いた方は復習用に、録画授業を視聴の方は併せて活用ください。 [Bootstrap3集中講座１のサポートページ]
★スライドのダウンロード場所★ 21日の集中講座１では、Bootstrapが初めての方向けに、Bootstrapだけを使ってページを作成する手順についてお話ました。また、中級者向けにはBootstrap+オリジナルCSSを併用する際に効率的に作業を進めるための工夫についてお話ました。 今回は、前回の授業で視認しにくかった点を改善し、スライドと話のみで進行できるよう、工夫してお話します。 タイトルにあるように「ラクしてデザインのクオリティを上げる方法」を １．Bootstrapのみでコンポーネントのデザインをする ２．１＋オリジナルCSSを使ってクオリティアップさせる この２つにポイントを絞って２時間解説をします。書籍などには載っていない、私が実際に仕事で活用している方法ですので、参考になるＴＩＰＳだと思います。 Bootstrapを仕事で使うことを検討している方、また、すでに使っている方もぜひ視聴して仕事に活かしてください。 なお、６月以降もこの集中講座は続きます。
今回も、前回に引き続き「簡単にラクしてデザインのクオリティを上げる方法」を解説していきます。 Bootstrapには、リリース後５年の間に蓄積された様々なコンポーネントが存在します。これを全部マスターしようとすると膨大な時間がかかりますが、この集中講座では、その中でも実際に仕事でよく使う４０個に厳選して解説しています。 前回までは、２５個＋今回までのブランク期間中に私のサイトでプラス５つについて解説しました。 今回は、いよいよ残り１０個を解説します。 この４０個の「コンポーネント（Web画面を構成する部品）」をマスターすれば、Bootstrapの基本が分かり、かつWeb開発の効率化が期待できるようになります。 実際に仕事をしている人は痛感されていると思いますが、Webデザイナーの業務内容は実に多岐に渡ります。その中で、開発の効率化は至上命題であると言っても過言ではないでしょう。 この講座でBootstrapの基本的な使い方・利用法を理解し、ぜひ仕事に役立ててください。 初めてこのページを見る方は、まずはこの講座に登録し、今回の授業を聞いて「興味あるな」 「自分でもできそうだな」と思ったら、前回までの録画授業を復習してみてください。
Bootstrap集中講座5 ７月１６日（木）２１：００から放送今回も、前回に引き続き「簡単にラクしてデザインのクオリティを上げる方法」を解説していきます。 テーマは「Bootstrap3集中講座 超・実践」です！ 前回では、５つに分類した４０個の「コンポーネント」をご紹介しました。今回はこの「コンポーネント」のHTMLの記述方法、つまり「クラス名」を誰よりも、何処よりもわかりやすく、具体的に解説します。 この４０個の「コンポーネント」はどんなデザインをする場合でもよく使うパーツなので、覚えて使えるようになるとサクサク仕事がはかどります。 cssフレームワークの基本にも通じる部分なので、習得すると応用範囲が一気に広がります。 前回、前々回を視聴された方も、今回初めての方も、「ラクしてデザインのクオリティを上げる」第一歩をマスターしてください！
いったい、どのへんが「超」なんだね！！！(｀(エ)´)ﾉ_彡☆ と、お思いのあなたへ この講座でBootstrap3をマスターすると、今までおそらく３日かかっていたデザイン作業が、わずか数時間で完了終えられるようになります。 実は白状しますが、私もわずか１年前までは 「『Bootstrap』なんて、知ったってそんなに現実は変わらないだろう」 「デザイナーなんらだから、ラクしちゃダメだろ！時間をかけて作るのがイイんだ」 と、正直思っていました。 ところが、たまたま人前で話す機会があり、そのための泥縄式にコッソリ学んだ結果、 「これ、イケるじゃん！☆」 と、cssフレームワークの素晴らしい効能に気づいてしまったのです。 それ以来、仕事量は従来の半分以下で早く仕事ができるようになりました。 この講座は、そんな私が実際に仕事で使っているエッセンス中のエッセンスをだけをググ～っと凝縮して、あなたにお話しようという企画です。 だから、「明日からの仕事に役立つ」部分だけを短期間でマスターできます。 今回、この講座で学ぶ機能（クラス名）はたった４０個ですが、この４０個が自由に使いこなせるようになれば、かなりBootstrapのことがわかるようになると思います。
（注）これを聴かずに、 Bootstrapを使わないでください！ 今回は、最後にして今までで一番重要なことをお話します。 それは、今まで一度も喋ったことのない、Bootstrap3の超重要TIPSです。 これがあるがゆえに「Bootstrap3」が「世界一使われているCSSフレームワーク」と言われているのでしょう。 勘の良い人はすでに気がついたかもしれませんね。 「グリッドシステム」、「コンポーネント」と並ぶ、Bootstrap3の３大重要機能の１つです。 これを知らずして、Bootstrap3は完全にマスターしたとは言えないので、 これまで視聴されてきた方も、また今回が初めての方も、 ぜひ聴きの逃さないようにしてください！ ーーーーーーーーーーーーーーーーーーーー Bootstrapを活用して作られたウェブサイト事例 ＜国内＞ Re:beaute 化粧品ブランドのサイト。見た目ではBootstrapを使っているとは分らないほどビジュアル重視のブランドサイト。こうしたサイトでもBootstrapを活用できる好例。v3.0.0を活用している。WordPressによって管理されている。 グリフィンインターナショナル 輸入製品の日本総代理店のサイト。コーポレイトサイトだが、Bootstrapを使っているとは感じさせないほど品よく、丁寧に作りこまれている。v2.3.2を活用しているので、クラス名が現行のv3系とは少し異なる。 薩摩川内市 | 次世代エネルギー 自治体の政策ＰＲサイト。このような情報量が多く、反復して使われるコンポーネントの多いサイトこそBootstrapを大いに活用すべき。v2.3.2を活用しているので、クラス名が現行のv3系とは少し異なる。WordPressによって管理されている。 ーーーーーーーーーーーーーーーーーーーー
