コンテンツ
- 01.灯台
- 02.ポリマー
- 03.APIエクスプローラー
- 04.フラッター
- 05. Google GitHub
- 06.パペッティア
- 07.ワークボックス
- 08.コードラボ
- 09.カラーツール
- 10.デザインスプリント
- 11. People + AIガイドブック
- 12.Googleアシスタント
- 13. PageSpeed Insights
- 14.GoogleのAMP
- 15. Google DevTools
- 16.マテリアルデザイン
通常、ウェブで作業するということは、何らかの形や形でGoogleと作業することを意味します。また、Google Chromeは競合他社に先んじているため、デザイナーと開発者は、プロジェクトがブラウザーでどのように機能するかを考える必要があります。どのように見えますか？どのテクノロジーをサポートし、どの程度安全で、どのように機能しますか？
幸い、Chromeには、サイトやアプリを最高の状態に保つためのツールが用意されています。 DevToolsを使用すると、設計者と開発者はWebページを洞察できます。DOMの操作、CSSの確認、ライブ編集による設計の実験、JavaScriptのデバッグ、パフォーマンスの確認を行うことができます。 （これらのGoogle Webツールの使用方法の詳細については、こちらを参照してください。最初から始める場合は、トップWebビルダーのリストも参照してください）。
しかし、Googleは単なるブラウザ以上のものを提供しています。それはあなたのデザインと開発生活のほぼすべての側面を支援するためのツールとリソースを持っています。パフォーマンスを向上させる方法を知りたいですか？灯台がお手伝いします。パフォーマンスの高いモバイルサイトを構築したいですか？次に、AMPに挨拶します。美しいPWAを構築したいとお考えですか？これで、Flutter、Material Design、Workboxに参加する準備が整いました。
Googleのツール、リソース、ライブラリ、フレームワークを使用することの利点は、地球上で最も人気のあるブラウザであるChromeブラウザでうまく機能することを知っていることです。その他のツールについては、ウェブデザインツールのまとめをご覧ください。
01.灯台
パフォーマンスはサイトの成功の重要な要素であり、LighthouseはWebページの品質を向上させるためのGoogleのツールです（適切なWebホスティングサービスも役立ちます）。では、Lighthouseをどのように使用し、何ができるのでしょうか。最も単純な形式では、[監査]タブからLighthouseを実行し、パフォーマンス、アクセシビリティ、SEOのチェックボックスに加えて、デスクトップまたはモバイルを含むオプションの選択肢から選択して、提案された改善を含む最終レポートを生成できます。
02.ポリマー
Polymerは、Webコンポーネントでの作業でよく知られていますが、プロジェクトは現在、ライブラリ、ツール、および標準のコレクションを受け入れるようにレパートリーを拡大しています。何が含まれていますか？ LitElementは、Webコンポーネントの定義を容易にするエディターであり、lit-htmlは、ユーザーがJSで次世代のHTMLテンプレートを作成できるようにするHTMLテンプレートライブラリです。さらに、PWAスターターキット、オリジナルのPolymerライブラリ、およびWebコンポーネントのセットもあります。
03.APIエクスプローラー
Googleには開発者が利用できるAPIの膨大なライブラリがありますが、必要なものを見つけるのは簡単な作業ではありません。これは、GoogleのAPIExplorerが支援の手を差し伸べるために介入する場所です。スクロールできる長いリストがありますが、すばやくアクセスできるように、APIリストをフィルタリングするための検索ボックスがあります。各エントリは、APIの使用方法の詳細が記載されたリファレンスページにリンクしています。
04.フラッター
単一のコードベースからモバイル、Web、デスクトップ向けの見栄えの良いアプリケーションを構築したい場合は、Flutterが最適です。このサイトは、Flutterを使用して構築するための完全なリファレンスです。何をすべきか手がかりがありませんか？ドキュメントは、たくさんのサンプルとチュートリアルの助けを借りて、インストールから作成までユーザーを連れて行きます。
05. Google GitHub
ほとんどの人が知っているように、GitHubは、コードとファイルを保存および共有するためのホスティングプラットフォーム/リポジトリです。そして幸いなことに、Googleはプラットフォーム上に独自の場所を持っており、260を超えるリポジトリをふるいにかけることができます。フィルタを使用して検索時間を短縮し、遊んだり貢献したりするリポジトリに近づきます。
06.パペッティア
組み込みノードであるPuppeteerは、ヘッドレスChromeにアクセスできる高レベルのAPIを提供します。UIなしで効果的にChromeにアクセスでき、開発者はコマンドラインから制御できます。では、Puppeteerで何ができるでしょうか。ページのスクリーンショットとPDFの生成、フォーム送信の自動化、自動テスト環境の作成には、いくつかのオプションがあります。
07.ワークボックス
PWAの構築を検討している場合、これは優れた出発点です。 Workboxは、Webアプリにオフラインサポートを追加するためのJavaScriptライブラリのコレクションを提供します。厳選された詳細なガイドは、Service Workerファイルの作成と登録、リクエストのルーティング、プラグインの使用、Workboxでのバンドラーの使用方法を示しています。また、チェックアウトするキャッシュ戦略の例もあります。
08.コードラボ
Google製品の実用的なガイダンスが必要ですか？ Codelabsは、「ガイド付き、チュートリアル、実践的なコーディング体験」を提供します。このサイトはカテゴリとイベントにきちんと分類されているため、必要なものをすばやく簡単に見つけることができます。これには、アナリティクス、Android、アシスタント、拡張現実、Flutter、G Suite、検索、TensorFlow、バーチャルリアリティが含まれます。オプションを選択して、小さなアプリケーションを構築するために必要なコードと指示を入手してください。
09.カラーツール
カラーツールは、アクセシビリティのチェックに加えて、パレットの作成、共有、および適用を可能にする簡単なツールです。ユーザーは、マテリアルパレットから事前定義されたパレットを選択できます。色を選択してからそれを原色スキームに適用し、二次オプションに切り替えてもう一度選択するだけです。最後に、両方のスキームのテキストの色を選択します。または、カスタムに切り替えて色を選択します。次に、アクセシビリティに切り替えて、すべてが正常であることを確認してから、最後にパレットをエクスポートします。
10.デザインスプリント
デザインスプリントキットは、デザインスプリントに参加する方法や実行する方法を学んでいる人向けです。初めての人から経験豊富なスプリントファシリテーターまで、すべての知識ベースをカバーするように見えます。方法論について学ぶか、ブリーフの作成、データと調査の収集、スプリント後の作業など、計画段階に直接進みます。ツール、テンプレート、レシピ、独自のメソッドを送信するオプションなど、多数のリソースも含まれています。また、リソースを保存および共有するための場所が必要になる可能性があるため、クラウドストレージの選択が適切であることを確認してください。
11. People + AIガイドブック
このガイドは、GoogleのPeople + AI Researchイニシアチブの成果であり、人間中心のAI製品を構築したい人に支援を提供することを目的としています。包括的なガイドブックは、ユーザーのニーズ、データの収集と評価、メンタルモデル、信頼、フィードバック、および優雅な失敗をカバーする6つの章に分かれています。各章には、演習、ワークシート、およびそれを実現するために必要なツールとリソースが付属しています。
12.Googleアシスタント
これはGoogleアシスタントの開発者プラットフォームであり、コンテンツとサービスをGoogleアシスタントと統合する方法に関するガイドを提供します。モバイルアプリを拡張する方法、検索とアシスタントのために豊富な方法でコンテンツを提示する方法、家中の照明、コーヒーマシン、その他のデバイスを制御する方法、スマートスピーカー、ディスプレイ、電話の音声と視覚のエクスペリエンスを構築する方法を示します。
13. PageSpeed Insights
PageSpeed Insightsは、Webコンテンツを分析してから、ロードを高速化する方法についての提案を提供します。 URLを追加し、[分析]ボタンを押して、魔法が起こるのを待つだけです。ドキュメントを確認して、PageSpeed APIがどのように機能し、どのように使用を開始するかについてのより良い洞察を得てください。
14.GoogleのAMP
AMPは、（うまくいけば）検索ランキングのトップに立つ高速読み込みのモバイルページを作成するためのGoogleのツールです。ユーザーファーストの高速サイトを作成する方法、Google製品間でAMPを統合する方法、Google AMPキャッシュを使用してAMPページを高速化する方法、AMPページを他のGoogle製品で収益化する方法を学びます。
15. Google DevTools
すべてのデザイナーと開発者は、Chromeにはブラウザに直接組み込まれた一連のツールが付属していることを知っています（または少なくとも知っておく必要があります）。 ChromeのDevToolsは、ページを構成する要素の検査、CSSの確認、ページのオンザフライ編集などに最適です。
[要素]タブは、DevToolsの概要です。選択したページを構成するHTMLコードが表示されます。選択したページから各divまたはタグのプロパティに関する洞察を得て、ライブ編集を開始します。これは、デザインを試すのに最適です。 FlexboxとGridのどちらを使用しているかにかかわらず、レイアウトを確認し、例を使用して関連するフォントを確認し、アニメーションを調べます。
他の場所では、CSSを表示および変更できます。 [要素]パネルの[スタイル]タブには、DOMツリーで現在選択されている要素に適用されているCSSルールが一覧表示されます。プロパティのオンとオフを切り替えて（または新しい値を追加して）、デザインを試してください。これは、ライブデザインに変更を適用する前に、すべてが期待どおりに機能することを確認するのに最適なツールです。
JavaScriptをデバッグしたり、Webサイトの速度を最適化したり、ネットワークの速度を調べたりすることもできます。ワークフローをすぐにスピードアップするために使用できる簡単なヒントを次に示します。 [ソース]タブに移動し、[新しいスニペット]をクリックして、頻繁に使用するコードを追加します。コードスニペットに名前を付けて保存します。必要に応じて繰り返します。これで、このコードスニペットを再度書き込む代わりに取得できます。
すべての優れたブラウザと同様に、Chromeは常に進化しており、新しいリリースごとに新しい機能が追加されます。 Chromeステータスプラットフォームで何が起こっているかを調べます
16.マテリアルデザイン
開発はGoogleのお気に入りの子と見なされる場合がありますが、作成、作成、構築するものが何であれ、見栄えがよく、ユーザーがそれを使いたくなるようなエクスペリエンスを提供する必要があります。マテリアルはGoogleの安定版に最近追加されたものですが、デザインキットの重要な部分に成熟したデザインシステムです。
他の優れた設計システムと同様に、独自のガイドラインセットがあり、よりエキサイティングなものに踏み込む前に確認する必要があります。さまざまな要素の使用方法、マテリアルテーマとは何か、テーマの実装方法、アクセシビリティを含むユーザビリティガイドの概要を説明します。他の場所では、レイアウト、ナビゲーション、色、タイポグラフィ、サウンド、図像、モーション、インタラクションなどのデザインの主要領域を含む、MaterialFoundationへの洞察があります。各カテゴリは、そのすべきこととすべきでないこと、そしてどこで注意を払うべきかを明らかにします。何が期待できるかを理解するために、レイアウトカテゴリには、レイアウト、ピクセル密度、列、ガターとマージン、ブレークポイント、UI領域、間隔の方法など、レスポンシブレイアウトの操作方法に関するセクションがあります。
デザインセクションの先にはコンポーネントがあり、デザインの作成に必要な物理的な構成要素を提供します。ここには何が含まれていますか？ボタン、バナー、カード、ダイアログ、仕切り、リスト、メニュー、進行状況インジケーター、スライダー、スナックバー（これらは画面下部のアプリプロセスに関する簡単なメッセージです）、タブ、テキストフィールド、ツールチップ。間違いなく、コンポーネントの包括的なコレクションです。
また、Android、iOS、Web、Flutterなどのさまざまなプラットフォーム向けにビルドする方法の詳細とチュートリアルを備えた開発者も忘れられていません。そして最後に、選択したデザインを実現するのに役立つ多くのリソース専用のページがあります。
この記事はもともとネットマガジンに掲載されていました。 326号を購入する.
