みなさんは普段、RWD（レスポンシブ・ウェブデザイン）でのMedia Queriesの書き順はモバイルファーストですか？もしくはデスクトップファーストですか？

WDSG策定チーム専用Slackにて、メンバー間で談義を行い［RWDにおけるMedia Queriesの書き順］のガイドラインを作成しました。

WDSG（Web Developer's Sharing Guidelines）とは、Webサイト制作関係者がガイドラインを共有することで、クリエイティブに集中できる環境を作るプロジェクトです。

１．RWDにおけるMedia Queriesの書き順

１）基本的に、CSSはモバイルファーストで記述します。

意図１：
デスクトップ用のCSSを先に記述すると、よりシンプルなモバイル用のCSSは、打消しの記述が多くなります。メンテナンス性を上げる為にも、モバイル用CSSを先に記述し、その後タブレット・デスクトップ用のCSSを書き足します。

２）デザインがデスクトップメインの場合、またはデザインカンプがデスクトップのみの場合は、デスクトップファーストで記述します。

２．策定までの流れ

［RWDにおけるMedia Queriesの書き順］について行ったSlackでの流れを、公開議事録として掲載します。

吉永さん：
CSSは、PCファーストとモバイルファーストのどちらで書きますか？

吉永さん：
自分はデザインカンプがPCのみ、SPはよしなにコーディングをお願いされることがよくあるので、PCファーストで書くことが多いです。
最近はSPのデザインカンプももらえるときはモバイルファーストで書こうかなと考えてます。

ヒカル：
僕は基本的にモバイルファーストで書いていて、外部ライブラリの仕様上PCファーストが書きやすい時は、該当箇所のみPCファーストです。
PCからスタイルを書くほうが、圧倒的に楽ですが…（カンプがPCメインなので）

桑島さん：
bootstrapが4になってからモバイルファーストで書くようになったので、私もモバイルファーストで書くようにしてます。
これからはモバイルファーストが主流になるのかなー？と思って。
ヒカルさんと同じように、外部ライブラリがPCファーストの時は、その部分だけPCファーストの場合もありますね。

園川さん：
僕たちもゴウさんと同じで、PCデザインを渡されてタブレット以下は雰囲気でというのが多いため
PCファーストで書くことが多いです！
しかし、デザインから行う場合やプライベートプロジェクトの場合はほとんどモバイルファーストで書いてますね。

SMICHRさん：
あまり気にしたことはないですがスマホ中心のコンテンツであればモバイルファースト、そうでなければPCファーストで指定しますー

ヒカル：
こちら、以下の感じで策定を進めてみたいと思います。
１）基本的に、CSSはモバイルファーストで記述します。
２）デザインがPCメインの場合や、デザインカンプがPCのみの場合は、PCファーストで記述します。

桑島さん：
いいと思います！
既にスマホでの閲覧数の方が多いし、Googleが公式で7月から新しいサイトにはモバイルファーストインデックスを適用するとアナウンスしたようなので、モバイルファーストは必然な流れだと思います。

ホナミさん：
これ、すごく大事ですよね。
レスポンシブでもPCファーストで教わっている人もいるのでは？
@桑島さん、Googleからそんなお達しが出ているですか？
ちょっとチェックします。

ヒカル：
＠桑島さん、MFI今日から始まってるんですね…（汗）
＠ホナミさん、以下の記事が参考になりました。

Google、新規サイトではモバイル ファースト インデックスをデフォルトに。2019年7月1日から適用
https://www.suzukikenichi.com/blog/mobile-first-indexing-enabled-by-default-for-all-new-websites/

以上が、Slackでの流れです。

実際は参考サイトを参照したり、ドキュメント化する時に調査を行いました。

３．WDSG策定チーム専用Slack

WDSG策定チームは、専用Slackで一緒に意見交換をしてくれるメンバーを募集しています！

意見出しチャンネルで制作方法について質問したり、判断に迷っていることや制作の悩みなど、自由な雰囲気で意見交換を行いながら、少しずつガイドライン化を進めています。

この活動が気になった方は、是非とも僕のTwitter（@design_hikaru）へご連絡ください！

最後までお読み頂き、ありがとうございました！