CSS Nite LP51「Reboot Dreamweaverフォローアップ（6）Bootstrap

2017年3月11日（土）にベルサール神田で開催したCSS Nite LP51「Reboot Dreamweaver」のフォローアップとして、松田直樹さん（まぼろし）の『チームで使える！ワークフローに効くDreamweaver+Bootstrap』セッションのスライドなどを公開します。

ダウンロード

メッセージと補足

Bootstrapセッションを担当しました、株式会社まぼろしの松田です。
ご参加いただきました皆さま、長丁場、大変お疲れ様でした。

Bootstrapを利用してのワイヤーフレーム作成の提案、および、DremaweaverのBootstrap機能のデモを行いました。
Bootstrap自体はやはりコードのみの「CSSフレームワーク」ですので、コーダー・エンジニアを本業としてない方には馴染みが薄いかもしれません。
ただ、DreamweaverのBootstrap機能は本当に感覚的操作ができますから、デモでもご紹介したようにコードを書くことなくレスポンシブな複雑レイアウトを素早く実現することができます。ぜひ、ライブビューと挿入パネルから触れてみてください。
現時点では本実装には向かない機能ながらも、ここまで簡単にグリッドレイアウトを行えるのは魅力です。

ディレクター・デザイナーの方はぜひこのワイヤーフレームづくりを試してみてください。コーダー・エンジニアの方は周囲にこの手法を提案してみてください。
ワイヤーフレームの設計時点で「Bootstrapをどう使えばこのレイアウトが実現できるか」が考慮されていることは、デザインや実装への引き渡しをスムースにしてくれることでしょう。

DreamweaverもBootstrapもツールであり、手段です。すべての機能を把握しておく必要はありませんから、触って便利な部分、自分の業務に合う機能だけでも使ってみてはいかがでしょうか。

以上、ありがとうございました！

セッション内で紹介したリンク

アンケート等でいただいた質問への回答

Q. 他のエディターで作ったBootstrapベースのHTML（フリーのBootsrapテンプレートなど）を、Dreamweaverで編集しても大丈夫ですか？

A. BootstrapのCSS（bootsrap.css）自体をカスタマイズしていない（class名を変更していたり）しない限り大丈夫です。Dreamweaverが勝手にスタイル等を書き換えることもないので問題ないはずです。

Q. コードのカスタマイズがしにくいのは、DWのせい？Bootstrapのせい？

A. 現状、Sass版のBootstrapを気軽に取り込む方法がないので、Dreamweaverのせいですね。今後のアップデートに期待しましょう。

Q. Museでいいのでは？

A. Museでワイヤーフレームを作る、という同様のことを行えますが、仕上がるHTMLがMuse独特のものであり、コーダー・エンジニアにとって読みやすい・理解しやすいものではありません。Bootstrapを使う利点はそこを解決できるということにあります。

Q. 出力やPDFにできるのか？

A. HTMLを作っているだけなので、できあがったワイヤーフレームをブラウザで表示すれば、印刷やPDFとして出力するのは自由に可能です。

Q. 今、ワイヤーフレームを作るとしたら、何が一番おすすめですか？

A. 個人的にはですが、大枠のページのワイヤーフレームには「Adobe Experience Design(XD)」を使用するのがオススメです。リピートグリッド機能がグリッドレイアウトの見た目を作るのにとても便利です。
レスポンシブでの挙動を確かめる部分にDreamweaverとBootstrapを利用しています。コードを直接書かれるのであれば、「Foundation」というフレームワークを使ってもよいでしょう。

ベストセッション2019

2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。