QWELについて
Web開発・プログラミング教室を営む QWEL.DESIGN (クヴェルデザイン) のクラフト作品集 "QWEL in Action" へようこそ。
これまで、UI/UX開発を数多く手掛けてきましたが、中でもインタラクション設計を得意とし、多くを JavaScript によるフルスクラッチ (Vanilla JS) で実装しています。必要に応じて PHP や API 連携にも対応しています。
JavaScript は、「見える」「触れる」「反応する」世界をつくることができる言語です。
つまり、ユーザー体験そのものを設計し、演出することができます。
さらに、柔軟で即興的な性質を持つこの言語の扱いは、まるで音楽やドローイングのように自由で、創造の喜びを味わえる営みだと感じています。
憧れの模倣や、誰かのためを想ってつくる体験が、人の感性を育てていく─
それが、QWEL の哲学です。
機能と表現の間にあるもの
QWEL.DESIGN の仕事としては、WordPressのオリジナルテーマ開発や、UI/UXの設計・実装が主な業務です。
一方で、純粋な好奇心と創作の楽しさから、インタラクティブなアニメーションやビジュアル表現にも取り組んできました。
それらは、機能と表現の間にあるものとして、手を動かしながら少しずつ形にしてきた "クラフト" の記録です。
実務用UI/UXコンポーネント
下記7つのコンポーネントは、どのようなwebサイトにも役に立つであろう、実務用UI/UXコンポーネントとしての定番作品です。
基本的な設計志向として、各コンポーネントはSCSSとJSの2対1組のファイルのみで動きます。
最軽量の形態として、各々バンドルし、1つのCSSファイルと、1つのJSファイルで済むことを目指しています。
JSファイルはモジュールとしてインポートして使用する前提で、クラスのインスタンスを生成するだけで初期化されます。
WordPressに用いる場合などは、webpackでBabelを使用してバンドルを行う必要があります。
サンプル・デモは、下記ボタンからご覧いただけます。実際のインタラクティブな動きをぜひご体験ください。
よく見かける「トップへ戻る」ボタンです。
モバイル閲覧時のストレス（スクロール疲れ、迷子など）を軽減する補助的なUXを目的として設置します。
フワッと出現し、ユーザーの邪魔にならない位置で自然に活用される設計を目指しています。
HTMLの記述が一切不要で動作し、パラメーターで出現のタイミングをある程度制御できます。
よく見かける「ハンバーガーメニュー」のメニューとメニュー呼び出しボタンです。
モバイル閲覧時、横一杯に収まり切らないメニューを収める目的として設置します。
メニュー開閉時の各所スムースな動きは、綿密なインタラクション設計が成されています。
HTMLの記述が一切不要で動作し、パラメーターでクローンするロゴやメインメニューを指定できます。
主にGoogleMapなど、埋め込みコンテンツに対して用いる補助的なUXです。
コンテンツにカバーを掛けて、一度タップ(クリック)操作してカバーを解除するまで、操作を受け付けません。
ユーザーに対してコンテンツが操作不能であることを、視覚的に伝えるため、演出を工夫しました。
GoogleMapなどのiframe要素をラップした要素に、クラス名を1つ付与するだけで動作します。
フェードアニメーションで画像が切り替わっていくカルーセルです。
フルサイズでメインビジュアルなどに使用するのに最適です。
このコンポーネントは美しく流れ変わる写真などに使用することを想定し、操作性を重要視していません。
仕様に沿ったHTML要素の構成を組むことで動作します。また、パラメーターで簡単に時間間隔を制御できます。
画像などを読み込み中の画面を隠し、アニメーションを表示させるUIです。
待ち時間のストレスを軽減する他、カラーやロゴでブランドのイメージを伝えるUXとしても用いることができます。
body要素に適用するのが一般的ですが、サンプル・デモのように、先のFaderに適用させても美しいです。適用したい要素にクラス名を1つ付与するだけで、動作します。
ロゴやメニュー呼び出しボタンなどのフローティング要素の色を、背景色に対応させるUIです。
トーンの異なる背景色を同ページ内で使用したいときなどに、UX向上のため重宝します。
ロゴの場合、クラス名を付与して動作させます。先のDrawerMenuの場合、パラメータでクラス名を付与するかどうか指定できます。
スライドアニメーションで画像が切り替わっていくカルーセルです。
数多くのバナーやロゴなどを並べる際に使用するのに最適です。
先のFaderに比べ、操作性を重要視して設計しました。フリック・ドラグ操作などへの対応もスクラッチで作りました。
仕様に沿ったHTML要素の構成を組むことで動作します。また、パラメーターで様々な設定を制御できます。
