WHY THIS TOOL
このツールをつくった理由
「あの、押すと開くやつ」って、なんて名前？
見た目はわかるのに、名前が出てこない。検索の入口で止まらないよう、ふだんの言葉で探して、その場で動きを試せる図鑑にしました。
WEB MAKING, A LITTLE BETTER.
Web制作の
小さなつまずきを、
使えるツールに。
パーツの名前を知る。ページの構成を組む。
最大6つの画面幅を並べて比べる。
制作で立ち止まりやすい3つの場面に、すぐ使える道具を揃えました。
03 TOOLS, READY TO USE
THE TOOL DESKAOI / 03
知る。組む。確認する。
WHY AOI TOOLSAoi Toolsについて
「これがあったら」を、
ひとつずつ。
名前がわからなくて、探せない。
構成を考えたいのに、細部が気になる。
Web制作のそんな小さなつまずきから、道具をつくっています。
名前を探すところから、公開前の画面幅チェックまで。
制作の途中に置いておける、3つの道具です。
SELECTED TOOL 01発見・学習
Webパーツ図鑑
見たことある、を
名前のわかる、に。
名前がわからないUIを、見た目や動きから探せる図鑑。実際に触りながら、名前と使いどころを知るためのツールです。
Webパーツ図鑑を開く（新しいタブで開く）SELECTED TOOL 02構成・設計
ワイヤーフレームメーカー
細部の前に、
ページの流れを。
セクションを組み合わせて、Webページの骨組みをつくるツール。何を、どの順番で伝えるかを、画面で考えられます。
ワイヤーフレームメーカーを開く（新しいタブで開く）WHY THIS TOOL
このツールをつくった理由
まず考えたいのは、色よりも「伝える順番」。
ページ構成を考えるたび、色や余白に気を取られる。HeroやFAQなどのセクションを並べ、伝える順番だけを先に試せるようにしました。
SELECTED TOOL 03確認・比較
Responsive Preview Lab
URLひとつで、
最大6つの画面幅を比較。
ひとつのURLを、375pxから1440pxまで最大6つの画面幅で一覧表示。崩れや見え方の違いを、横に並べて確認できます。
Responsive Preview Labを開く（新しいタブで開く）WHY THIS TOOL
このツールをつくった理由
サイズを切り替えるだけの確認を、何度も繰り返していませんか？
スマホで直したら、PCももう一度。確認のたびに画面幅を切り替えると、差を見落としやすい。そこで、最大6つの画面幅をひとつの一覧に並べました。
FROM FINDING TO CHECKING
探すところから、
見比べるところまで。
3つの道具を、制作の流れに沿って。
- 01Find
知る
名前と使いどころを見つける。
Webパーツ図鑑 - 02Structure
組む
伝える順番を試す。
ワイヤーフレームメーカー - 03Compare
確認する
画面幅ごとの違いを見比べる。
Responsive Preview Lab
ツール同士は自動連携しません。必要な場面で、それぞれ開いて使います。
OPEN THE TOOLS / 03
気になるものから、
触ってみる。
3つとも、ブラウザですぐに使えます。
01Webパーツ図鑑発見・学習のツールツールを開く（新しいタブで開く）02ワイヤーフレームメーカー構成・設計のツールツールを開く（新しいタブで開く）03Responsive Preview Lab確認・比較のツールツールを開く（新しいタブで開く）
FIND / STRUCTURE / COMPAREAOI TOOLS