「Shift14：Webデザイン行く年来る年」

こちらは、CSS Nite Shift14のフォローアップページです。

公開ポリシー

このページは、本イベントの参加者（およびフォローアップ参加者）限定のコンテンツです。 ただし、60日を目安に一般公開する予定です。

鹿野 壮の「セミハンズオンで学ぶモダンCSS」

CSS Nite Shift14で好評だった鹿野 壮さんの「マークアップ」セッションのロングバージョンを単発オンラインセミナーとして開催します。

Shift14に参加された方は1,000円引きです。お申し込み時に「割引コード：cssniteshift14」を入れてください（12月末までのお申し込みに有効）。

マーケティング

益子 貴寛さん（まぼろし）から

今回は基調講演なしのトップバッターということで、今年一年の世の中のプレイバックと合わせて、来年に向けて押さえておきたいマーケティングの新たな動きをお伝えしました。

政治ネタはあまり触れませんでしたが、アメリカの大統領選もまだ結論が出ていない状況です。そんなことにも少しだけ目配りをしながら、水の波紋がどこで生まれ、どのように自分たちに寄せられてくるのかを、年末年始で時間があるときに、心静かに考えてみましょう。

毎年、Shiftでその年のエネルギーを使い果たしてしまいます。そう見えないかもしれませんが、本当なんです。残りの日々をなんとか乗り切って、年末年始を迎えたいと思います。

吉村 正裕さん（サイバーアシスト）から

コロナショックという時代の端境期にある今回、皆様に何をお伝えしようかと益子さんと2人で真剣に悩みました。その結果「方法論やテクニックをお話するのではなく、世の中の流れをマーケティングの観点から俯瞰的・網羅的にお伝えする」という結論に達しました。

「マーケティング戦略」という言葉は競争の中での生き残りを意味する言葉であり、その中で他（顧客・競合他社）という存在を意識することになりますが、「マーケティング・デザイン」は、魅力ある事業体に変えるという発想から他（顧客・競合他社・パートナー）という存在を意識するため「競争」に加えて「共創」という概念が求められます。

Shiftは、デザイナーの方が多く参加されていると思いますが「マーケティング・デザイン」は従来のWebデザインともマーケティング戦略とも異なる概念であるということを少しでも感じ取って頂ければと思いました。2021年にむけてピンチをチャンスに変えるため、自社の存在意義（Why）を見つめなおして、どのように変革すべきか（How）を見つめなおして頂ければ幸いです。

ダウンロード

  • スライド（鬼滅の刃、芸能人の写真など、一部のスライドを除いてあります）
  • 動画（YouTubeにて限定公開）

アクセシビリティ

辻 勝利さん（コンセント）

全国各地で僕たちのセッションにご参加頂いた皆様、本当にありがとうございました。

今年も、ウエちゃんといっしょに1年間のアクセシビリティを振り返ることができて、とても楽しいひとときを過ごさせて頂きました。様々な場所でご視聴頂いた皆様に、アクセシビリティを高めていくことの大切さを実感していただき、身近な話として捉えて頂けるようなセッションがお届けできておりましたら幸いです。

新型コロナウイルスの影響で、Shift14が完全なオンライン開催になったことで、僕にとっては一つ大きな利点がありました。これまで、紙に書かれたアンケート結果をウエちゃんに一つ一つ読んでもらって皆様からのコメントを拝読していたのですが、今回、アンケートフォーム経由で皆様のコメントがSpreadsheetにどんどん蓄積されるようになったことで、独力でもリアルタイムにアンケート結果を確認できるようになったことです。

これまで紙（アナログ）で集められていたアンケート結果が、よりアクセシブルな状態で出演者に届けられるようになったこと、CSS Niteがよりアクセシブルなイベントになったということだと思っています。アクセシブルなデータは、受け取った人自身が読みやすいような形に変換して利用することができます。

来年も、よりアクセシブルになったCSS Niteで、皆さんとお会いできるのを楽しみにしております。

セッションの中でもご紹介したYouTubeチャンネル「辻ちゃんウエちゃんのAccessiブルGoGo!」では、アクセシビリティに関する皆様からのご質問をお待ちしております。是非お気軽に #a11ygogo のハッシュタグを付けてツイートして頂くか、各コンテンツのコメント欄までお寄せください。

来年2021年が、皆様にとってよりアクセシブルな年になりますように。

植木 真さん（インフォアクシア）

皆さん、あっという間の5時間半、いかがでしたか？

今年も辻ちゃんとのコンビでお届けした「アクセシビリティ」のセッション、Twitterやアンケートではご好評をいただいており、ホッと胸を撫でおろしています。

昨年、そして今年のランキングをご覧いただいても分かるように、実際に存在しているアクセシビリティの問題の多くは、Webデザインやコーディングにおける基本の「キ」といえるものが圧倒的に多いのです。

ランキングは、ウエちゃんのクライアントさんの顔ぶれが毎年入れ替わるため、同じサイトを対象にしているわけではありません。今年のように、アクセシビリティを考慮していなかったファッションブランドやショッピングサイトなどが含まれると、問題点の傾向も変動します。

とはいえ、上位にランクインする項目は大きく変動していないので、手を付けるならまずはこのあたりから始めると、アクセシビリティを高めやすいと言えるかもしれません。

アンケートで「普段なかなかできていない」といったコメントをよく頂きますが、実は意外とすでにできていることも多いのです。むしろ、アクセシビリティを全く考慮せずにWebページやアプリを作ることのほうが難しいと言ってもよいでしょう。

もちろん、今回ご紹介した最終兵器の「WAI-ARIA」を使わなければ対処できない場合は、それなりに工数を要することもあります。でも、それは全体の中で見ればごく一部です。

そこまでやらずとも、まずは今回のランキングのTOP3だけでも意識してみることをオススメします。それだけで皆さんのコンテンツやサービスを、今までもより多くの人たちが利用できるようになりますよ！

さて、辻ちゃん・ウエちゃんのコンビの次の登壇予定は、今週23日（水）の夜8時から開催される「Accessibility Step Vol.07」、そして来年1月23日（土）の「AccessiブルGoGo! Meetup #2」となっております。

どちらもオンラインでの開催ですので、アクセシビリティにちょっと興味を持っていただいた方、よろしければそちらでまたお会いしましょう！

関連リンク

ダウンロード

  • スライド（PDF：7.95MB）
  • 音声（YouTubeにて限定公開）
  • 動画（一部のみ／YouTubeにて限定公開）

マークアップ

CSS Nite Shift 14のマークアップセッション「今 見直しておきたいCSSの新機能 2020」を担当した鹿野です。今回はご参加ありがとうございました！

「知らないCSSの機能を知れてよかった」「昔苦労していた実装をCSSだけで対応できるようになったので驚いた」「さっそく現場で使ってみたい」などの声をいただき、嬉しく思います。

フォローアップでは、とりあげた技術や発表の補足を紹介します。

2020年のCSS関連のニュース

2017年1月〜2020年12月の日本におけるIE11のシェア https://gs.statcounter.com/browser-market-share/all/japan/#monthly-201712-202011

2017年1月〜2020年12月の世界におけるIE11のシェア（statocounterより） https://gs.statcounter.com/browser-market-share#monthly-201712-202011

IE11でアクセスしたときのリダイレクト対象を確認できるURL https://edge.microsoft.com/neededge/v1

Internet Explorer から Microsoft Edge にユーザーを移動する | Microsoft Docs https://docs.microsoft.com/ja-jp/microsoft-edge/web-platform/ie-to-microsoft-edge-redirection

モダンブラウザで使えるようになったCSSの新技術 https://caniuse.com/?compare=ie+11,edge+87,firefox+86,chrome+90,safari+14,ios_saf+14.0-14.2,and_chr+87&compareCats=CSS

CSSの技術紹介

いずれも、全モダンブラウザ（Google Chrome、Firefox、Safari、Microsoft Edge）で使えるCSS技術です。

① テキストの縁取りができる text-strokeプロパティ https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke

② 要素をテキストの形でくり抜く background-clip: text https://developer.mozilla.org/ja/docs/Web/CSS/background-clip

③ 要素を「粘着」できる position: sticky; https://developer.mozilla.org/ja/docs/Web/CSS/position

④ ユーザーのダークモードを判別できる prefers-color-scheme https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme

⑤ CSS Gridの自動配置 https://developer.mozilla.org/ja/docs/Web/CSS/repeat()

⑥ 行数指定のline-clampプロパティ https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp

⑦ 画像のハメ込み方を指定する object-fitプロパティ https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

⑧ 2つの値のうち、小さい方を使える min()関数 https://developer.mozilla.org/ja/docs/Web/CSS/min()

ミライのCSS

今後のブラウザ進化により使えるようになるCSSの新技術です。

① Flexboxのためのgapプロパティ https://developer.mozilla.org/ja/docs/Web/CSS/gap

対応状況 https://caniuse.com/flexbox-gap

② 要素のアスペクト比を指定できる aspect-ratio https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

Chrome 88で正式対応 https://blog.chromium.org/2020/12/chrome-88-digital-goods-lighting.html

③ CSS Gridで列ごとにアイテムを積める Masonry https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout

発表中の誤り

「画像の遅延ロード（<img loading="lazy">）にFirefoxが未対応である」と発言したのですが、正確には「Safariが未対応」でした。Firefoxは画像の遅延ロードに対応済みです。

参考: Can I use https://caniuse.com/loading-lazy-attr

デモデザイン協力

今回のデモデザインは、大阪のデザイナー松下絵梨さんに協力いただきました。 https://twitter.com/matsu_eri

著書：Adobe XDではじめるWebデザイン&プロトタイピング https://book.tsukiakari.design/xd/

さいごに

次のような媒体でも情報を発信しています。ぜひご覧くださいませ。

Twitter https://twitter.com/tonkotsuboy_com

Qiita https://qiita.com/tonkotsuboy_com

ポートフォリオ https://kano.codes/

JavaScriptコードレシピ集 https://ics.media/entry/19765/

ダウンロード

アドビ

アドビセッションの境です。本イベントにご参加いただきありがとうございました。 今年のMAXは新型コロナの影響で初のオンライン開催となりましたが、100を超える国・地域から200万人が参加する（登録者数60万人）という想定外のインパクトがあり、私自身も驚いています。 360を超えるセッションがライブ配信され、現在でもほとんどのアーカイブが視聴可能になっていますので、年末年始の空いた時間を利用してご覧になってください。

アドビの製品サービスの多くはアジャイル開発にシフトしており、実装された機能もユーザの声を聞きながらブラッシュアップされていきます。また、テクノロジープレビューのように、こっそり搭載して、興味関心のあるユーザにまず使ってもらうことで、こまめに仮説・検証を行っています。

開発者のスニーク（こんな機能を開発しているよ！というチラ見せ）や先行プレビューなども増えていて、常にユーザが何を求めているのか探りながら、開発を進めています。皆さんの要望／リクエストが通りやすいので各製品のUser Voiceやフォーラムなどで、どんどん投稿しましょう。

MAXで発表された情報には、まだネット上の記事になっていない技術やサービスが多々あります。今回のセッションでもいくつか取り上げましたが、私個人の情報ページも公開予定になっていますのでご利用ください。

Creative Cloud 情報サイト［2021年］ Design Systems, XD Extension, Photoshop API, etc https://ebookcast.myportfolio.com/

※12/20からページにアクセスできますが、正式オープンは1月4日になります ※セッションで使用したスライド（PDF）にはデモ動画が入っていませんが、こちらの情報ページやTwitter（@commonstyle）で投稿していますので参考にしてください。

関連情報のリンクをまとめました。

Adobe MAX 2020関連

Adobe MAX 2020 日本語サイト https://maxjapan.adobe.com/

オンデマンド視聴ページ https://www.adobe.com/jp/max.html

セッションカタログページ（ここで視聴できます） https://www.adobe.com/jp/max/2020/sessions.html

XDの新機能（3D変形）

※Z値によるオブジェクトの重なりは、レイヤーの重なりとは異なりますのでご注意ください https://helpx.adobe.com/jp/xd/user-guide.html/jp/xd/help/design-in-perspective-using-3D-transforms.ug.html

XDの拡張プラグイン／Webサービスの高度化

Adobe XD Extension for Visual Studio Code https://marketplace.visualstudio.com/items?itemName=Adobe.xd&ssr=false#overview

Spectrum（Adobeのデザインシステム） https://spectrum.adobe.com/

Quest AI（アートボードからWebページを生成するサービス） ※無料プランはお試し版として使用できます https://www.quest.ai/

Zapier（自動化設計サービス） https://zapier.com/

XDを使った高校の授業（アドビで行ったもの）

Adobe XDのワークショップで学ぶ、高校の情報デザインに必要なアイデアとは？ https://blogs.adobe.com/japan/cc-education-workshop191123/

2022年から情報科の授業はこう変わる―― Adobe XDによる「情報デザイン」ワークショップ体験レポート https://edtechzine.jp/article/detail/4391

Photoshop API／AI／自動化について

Adobe Photoshop Express 公式ページ https://www.adobe.com/jp/products/photoshop-express.html

Photoshop API 技術情報 https://www.adobe.io/apis/creativecloud/photo-imaging-api.html

Photoshop APIのビジネス利用についてのMAXセッション S9045 - クリエイティブの自動化最前線！　企業とクリエイターにもたらす変化とは？ https://portal.adobe.com/widget/adobe/am20/AdobeMax20Catalog/session/15955162923920011rJ1

来年から3D関連製品の積極的なプロモーション活動が始まります。

Adobe 3D

Adobe 3D & AR 公式ページ https://www.adobe.com/jp/creativecloud/3d-augmented-reality.html

Substanceスイート https://www.adobe.com/jp/products/substance.html

IKEAオンラインストア【公式】（カタログ写真の多くは3DCG） https://www.ikea.com/jp/ja/

Adobeで3Dスペシャリストを募集中（勤務地：東京） https://adobe.wd5.myworkdayjobs.com/ja-JP/external_experienced/job/Tokyo/Solution-Consultant---3D-Specialist_R101351

アドビが運用しているAdobe XDの総合学習プログラムです。 動画で学べるチュートリアルやレッスン、ワークショップ、XD検定が公開されています。学習キットもダウンロードできますのでご利用ください。

Adobe XD Trail - 動画でXDを学ぶ総合学習プログラム

https://xdtrail.com/

ダウンロード

UI設計とツール

Dropbox Paperにまとめています。

ダウンロード

Webデザイントレンド

原 一浩さんから

Webデザイントレンドセッションを担当しましたカンソクインダストリーズの原です。
今年は新コロナウイルス関連の影響により、オンラインオンリーイベントとなりました。
お聞き苦しい点などございましたらお詫び申し上げます。

今回はちょっと時間が読めない部分があり、海外デザイン編の9位から7位は、おまけという形でスライドの末尾に配置してあります。こちらのサイトも見ていただけると、今年らしさがわかるかなと思います。

以下、今回の独自のトレンドランキング一覧となります。

海外デザイン編

海外大学編

上場企業編

グローバル企業編

自治体編

また、ちょっと前に「Webデザイントレンドのよりみち」というYouTubeチャンネルを開設しました。
今後、Webデザイントレンドセッションに取り上げなかったニッチな内容なども取り上げていこうとおもっています。
よろしければこちらのチャンネル登録にご登録ください。

みなさま、良いお年を。

YouTubeチャンネル「Webデザイントレンドのよりみち」
https://www.youtube.com/channel/UC1rVx0vAg66su1WvH3X-RJg

Twitter @kara_d
https://twitter.com/kara_d

矢野さんから

デザイントレンドご視聴ありがとうございました！
矢野の目補足です。

このサイトで主に使用してるセリフ書体は

ですが、これ　2020年のGoogle Fontでの利用率ランキングではかなり上位で16位（1位はSDGsマークでもおなじみのROBOT）です。ちなみにNoto Sans JPは堂々の14位。およそ800種類あるGoogle Fontのなかでも相当な人気ですね。なじみのあるスタンダードなフォントをさらりと使いながら、文章や写真の質を担保するといったバランスの良さは参考になります。

2020年おまけトレンド

フリーイラストコンテンツの普及にイラスト表現のトレンドが影響を受けている部分が見受けられます。独自性より手っ取り早さを重視する傾向があるのかもですね。

人気のあるフリーイラスト提供サイト

今年もそろそろおしまいです。先が見えないときは無理やり見ようとしなくてもよく、自分のできることを淡々とやっていけばいいのだと私は考えるようにしています。

また来年、元気に再開しましょう！

坂本さんから

デザイントレンドセッションに出演したフォルトゥナの坂本です。この度は年末のお忙しい中、長時間ご視聴いただきありがとうございました。

今年はShift12以来の出演となり、またオンラインでの配信ということで、今までと違った緊張感を持って迎えましたが、なんとか無事に終えることができほっとしています。

今年のデザイントレンドは調査時から「あまり変わっていない」という印象を持っていました。緊急事態宣言前後は、私自身も案件がなくなったり、延期になったりしましたし、受注済みの案件も予想以上に時間が掛かるようになったりしておりました。

皆さんもリモートワークになられた方なども多いかと思いますが、クライアントとのコミュニケーションやレスポンス時間の変化に戸惑われたのではないかと思います。

しかしながら、年の後半は今の時代に合わせて動こうという企業も増えてきたり、今まではウェブに力を入れていなかったような企業も、ウェブをもっと活用していこうという動きが大きくなったように感じています。

今年は大きく変わっていないという印象を受けた方の捉え方は間違いないと思います。この「変化しなかったこと」そのものが今年のデザインなのだと思います。
最後の一言でお伝えした「私たちのあり方」の再定義ですが、来年はきっとウェブのデザインに反映されるはずですので、どのような動きが見られるか楽しみにしています。

坂本の目では、四国のコピーについてお伝えしました。アンケートにコメントをいただきましたが、室戸市のターンエー（∀）は、室戸市の形状で合っているようです。

地方都市は今までUターン・Iターンなどを積極的に示してきましたが、今は人が動きにくい状況になってしまい、当面は今住んでいる人に向けたメッセージが中心になってくるのではと思います。四国にはまだまだリニューアルが多くの残っていますし、他の地域でもまたコピーの動きがおもしろくなりそうですので、こちらも注視していきたいと思います。

来年は皆様の前でセッションを開催できる状況になっていますように。
皆さま、よい年をお迎えください。

ウェブサイト
https://www.color-fortuna.com/

Twitter
https://twitter.com/Kunio_Sakamoto

ダウンロード

名村さんから

CSS Nite Shift14でMC（司会）を務めさせていただきましたサービシンクの名村です。 決してMCが本職ではなく（笑）、冒頭で自己紹介をさせていただきましたが、私もいちWebクリエイター、その中でも職域としてWebディレクターをしています。

今回のMCをしたきっかけですが、私が今年の夏から「Webディレクター」の疑問質問にお答えするポッドキャストを始めたことでした。 合わせて、Webディレクターとして26年目であったことと、元々舞台役者、声優をしていた経歴もあったこともあり、鷹野さんから指名をいただきました。

これまでのCSS Nite司会の鷹野さん、またアシスタントの方々と比べ、キャラが大きく異なる違う、進め方が全然異なる、といったこともあったかと思います。 そこに違和感を感じる方もいること承知ではあったのですが、今年の状況で「オンラインで参加される方に、何かしらの臨場感、会場感、一体感を作りたい」ということからあのスタイルでさせていただきました。 暖かく見守っていただけた皆様には本当に感謝しています。

また、私自身も今年ウェブセミナーには数十回登壇をしました。 その中で「セミナーの進行」「セッションの切り替え」など、リアルでは気にならなかったことがオンラインでは目立つようになったり、ちょっとしたことが視聴者側には大きく見えたりを経験しました。

皆様も「テレビ会議（テレカン）」等でのファシリテートでは色々なことを感じた1年だったのではないでしょうか？ そういったことに対して先日のMCが一つの形であったと思っていただければ幸甚です。

ポッドキャストでは今回のセミナーの感想、またWeb制作における疑問・質問なども受け付けています。

ぜひご連絡ください。

また皆様の前で登壇者、またMCでお会いできるのを楽しみにしています。 よい年をお迎えください。

フォントおじさんから

お問い合わせ

ご不明点やお気づきの点がありましたら、フォームからご連絡ください。

お問い合わせ

このページの上部に戻る