2018年8月11日（土）UMEDAI 大阪梅田 会議室で開催したCSS Nite in Osaka, vol.45「All About XD」 w/YATのblog のフォローアップとして、森 和恵さん（r360studio）の『Bootstrapありきで考えるXDでのページレイアウト』セッションのスライドなどを公開します。
フォローアップ
先日は、ご参加ありがとうございました！みなさんがワクワクしながら真剣に取り組んでいるようすを後ろで眺めていて、Adobe XDというソフトはたくさんの方に期待されているプロダクトなのだなと改めて感じました。
- コーダーさんに寄り添ったデザインが必要だと思いました
- コーディングをする人を含めたコミュニケーションが大事だと感じました
- 低予算の案件で使えそう
- スピード感のある制作ができそう
- Bootstrapに興味がでました
…などアンケートを通じて感想を拝見し、今回のテーマを誤解なくまっすぐお伝えできたことに安堵しております。
わたしは普段、答えがはっきりとしているウェブコーディングやAdobeソフトの使い方をレクチャーしていて、それをどう伝えるか？を悩むことがあまりありません。
しかし、今回登壇した“ワークフロー”の話は「自分はこんな方法で制作をしています」というような主観で語ることが多くなり、是非や可否の判断がむずかしく、「これって、本当に正しいの？」「現場で使えるの？」と明確な答えがないものを模索しながら登壇準備をしました。自分の作業工程を深く考えたことで、ワークフローを振り返るよい経験となりました。
設計からデザインを経て、最終工程のコーディングまで、コミュニケーションをスムーズにするにはルールが必要だと考えています。そして、それをが守ることは次の工程を担当する人への気遣いだと思っています。
今回は、コーディング経験が浅くても仕組みが理解しやすく、普及率の高いCSSフレームワーク“Bootstrap”をルールに選びましたが、みなさんの現場で使いやすいルールがあれば、それをベースにしても同じことができると思います。みなさまの制作が、少しでもスムーズに進むことを願っています。
Bootstrap補足
Bootstrapをこれから学びたい！という方のために、以前にYoutubeライブ配信した動画のURLをご案内します。また、セッション中に紹介したBootstrapのUIキットのURLは下記です。
- Bootstrap４を始めよう！With Dreamweaver (1)～(4)
※Bootstrapとはなにか？についての連載動画です。この後も続ける予定です。 - Bootstrap 4 UI - xd resources
※BootstrapのUIキットです。秋の間に日本語のUIキット作ることにしました！経過報告はTwitterでしますね。
8月16日ライブ配信のこと
8月16日22時30分から、下記URLでライブ配信を行います。
今回のセッションでお伝えしたことを少しだけ深掘りしたり、いただいた質問にお答えしようかと思っています。
Q&A
(ご質問) BootstrapUI を使う上で、フォントはどう注意すればいいですか？
チームでXDファイルを共有するので「全員のマシンに入っているフォント」を決めて、それだけを使うのがベストです。各々でXDファイルがスムーズに開けます。
開くときに注意メッセージがでるものの、フォントがなくてもXDファイルは開けますので、「最終的に画像にする部分」のフォントはデザイナーだけが持っている状態でも進められます。その場合は、画像の最終的な書き出しはデザイナーが担当します。
「最終的にテキストする部分」のフォントは、全員が持っておくようにしましょう。XDファイルで見たときとウェブサイトの見た目が違ってしまいます。
全員がAdobeCCを契約しているのであれば、CCのサービスで利用できる【 Typekit 】フォントを使うのが手軽です。Typekitは、多くのフォントがWebフォントとしても利用できます。XDファイルでも使えるし、公開するサイトのテキストのWebフォントとしても使えます。
もしくは、オープンソースフォントを使う方法もあります。【 Google Noto Fonts 】のようにダウンロード提供とWebフォント提供の両方あるものを選んでください。
(ご質問) XDでBootstrapテンプレートを作る際もリピートグリッドを使いますか？
デモで少しお見せしましたが、ページをレイアウトする枠（Bootstrapグリッド）は、リピートグリッドで増やすと楽に操作できます。後に、個々にグリッドのサイズを変えるときは、リピートグリッドを解除してから作業します。また、今回デモファイルでは、ナビゲーション部分でもリピートグリッドを使用しました。
「この部分は同じパーツの繰り返しになるな」と思ったら、リピートグリッドをどんどん使います。
リピートグリッド使うと繰り返しの操作が楽になることが多いので、機能を理解して、いろいろな場面で使えると、もっとXDが好きになると思います。
SNSなど
お知らせはTwitter＆YouTubeで。フォロー＆チャンネル登録をお待ちしています。
ベストセッション2019
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。
