Web制作者はブックマークしておくと便利! 各UIコンポーネントのさまざまな実装方法のまとめ -The Component Gallery

Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法がまとめられたThe Component Galleryを紹介します。

コンポーネントは再利用可能な単一の部品として利用でき、実装するコードや名前の付け方など、Web制作者には非常に勉強になると思います。

Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法のまとめ

The Component Gallery

The Component Galleryの特徴

The Component Galleryには、実際のデザインシステムで使用されているUIコンポーネントがまとめられています。フロントエンドのデベロッパーとして毎日経験する問題を解決するために作成されました。

サイトのキャプチャ

The Component Gallery

コンポーネントや要素に名前を付けるのに悩んだことはありませんか?
そんな時は他のデベロッパーがどのように名前を付けているのか見ることが、出発点として最適です。ほかにも、実装がうまくいかないときにも、コードをコピペして利用できるので、そのままでもそこから始めてみるのにも最適です。

The Component Galleryの利用方法

各UIコンポーネントの利用は、簡単です。
まずは、「Component」にアクセスします。

サイトのキャプチャ

Component -The Component Gallery

さまざまなUIコンポーネントがカテゴリごとにまとめられています。
パンくずを見てましょう。

サイトのキャプチャ

Breadcrumb -The Component Gallery

パンくずは、現在ページの階層内における場所を示すリンクのリストです。

パンくずのコンポーネントには45種類が収録されており、気になったものをクリックします。それぞれには、使用言語(CSS, Vue, Reactなど)やライセンスが明記されています。

まずは、オープンソースでSassも提供されているBulmaのパンくず。
定番デザインのパンくずだけでなく、バリエーションも豊富です。

サイトのキャプチャ

Breadcrumb -Bulma

続いて、Reactを使用しているAnt Designのパンくず。
区切りに「/」「>」「:」が使用されており、アイコンを使用することも可能です。

サイトのキャプチャ

Breadcrumb -Ant Design

各UIコンポーネントのまとめ

The Component GalleryにまとめらているいくつかのUIコンポーネントを見てましょう。

ボタンのコンポーネント

Button -The Component Gallery

ボタンは、フォームの送信やインターフェイスコンポーネントの表示。非表示などのアクションをトリガーします。

カードのコンポーネント

Card

カードは、単一のエンティティを表すコンテンツのためのコンテナ。たとえば、記事・タスク・連絡先など。

ドロワーのコンポーネント

Drawer

ドロワーは、スクリーンの端からスライドして出てくるパネル。

フッタのコンポーネント

Footer

フッタは、ページやセクションの下部に表示されるコンポーネント。一般的には、著作権や法的情報、関連コンテンツへのリンクなどを表示するために使用されます。

フォームのコンポーネント

Form

フォームは、ユーザーがサーバーに情報を送信するために使用する入力コントロールのグループ。

ヘッダのコンポーネント

Header

ヘッダは、Webサイトやアプリの上部に表示されるコンポーネント。一般的には、サイト名やメインのナビゲーションが含まれます。

ヒーローのコンポーネント

Hero

ヒーローは、いわゆる大きなバナーで、ページが表示されると最初のアイテムとして表示されます。全幅の画像が含まれることが多いです。

リンクのコンポーネント

Link

リンクは、リソースへの参照です。外部(別のWebページなど)または内部(現在のドキュメント内の特定の要素など)の場合があります。

ナビゲーションのコンポーネント

Navigation

ナビゲーションは、ナビゲーションリンクのコンテナ。他のページ(メインサイトナビゲーションなど)または現在のページ内の要素(目次など)へリンクさせることができます。

サーチインプットのコンポーネント

Search Input

サーチインプットは、ユーザーが検索語を入力することでコンテンツを見つけることができます。

タブのコンポーネント

Tabs

タブ型インターフェースは、複数のパネル間を行き来することで、煩雑さを解消し、より小さなスペースに多くのコンテンツを収めることができる方法です。

sponsors

top of page

©2022 coliss