QWELについて
Web開発・プログラミング教室を営む QWEL.DESIGN (クヴェルデザイン) のクラフト作品集 "QWEL in Action" へようこそ。
これまで、UI/UX開発を数多く手掛けてきましたが、中でもインタラクション設計を得意とし、多くを JavaScript によるフルスクラッチ (Vanilla JS) で実装しています。必要に応じて PHP や API 連携にも対応しています。
JavaScript は、「見える」「触れる」「反応する」世界をつくることができる言語です。
つまり、ユーザー体験そのものを設計し、演出することができます。
さらに、柔軟で即興的な性質を持つこの言語の扱いは、まるで音楽やドローイングのように自由で、創造の喜びを味わえる営みだと感じています。
憧れの模倣や、誰かのためを想ってつくる体験が、人の感性を育てていく─
それが、QWEL の哲学です。
機能と表現の間にあるもの
QWEL.DESIGN の仕事としては、WordPressのオリジナルテーマ開発や、UI/UXの設計・実装が主な業務です。
一方で、純粋な好奇心と創作の楽しさから、インタラクティブなアニメーションやビジュアル表現にも取り組んできました。
それらは、機能と表現の間にあるものとして、手を動かしながら少しずつ形にしてきた "クラフト" の記録です。
実務用UI/UXコンポーネント
下記10のコンポーネントは、どのようなwebサイトにも役に立つであろう、実務用UI/UXコンポーネントとしての定番作品です。
基本的な設計志向として、既存の情報構造 (HTML) にdata属性を記述する以外には、構造に介入せず、構造を再利用し、振る舞いだけを提供します。
各コンポーネントはSCSSとJSの2対1組のファイルのみで動きます。
最軽量の形態として、各々バンドルし、1つのCSSファイルと、1つのJSファイルで済むことを目指しています。
JSファイルはモジュールとしてインポートして使用する前提で、クラスのインスタンスを生成するだけで初期化されます。
WordPressに用いる場合などは、webpackでBabelを使用してバンドルを行う必要があります。
サンプル・デモは、下記ボタンからご覧いただけます。実際のインタラクティブな動きをぜひご体験ください。
Headerの高さをCSS変数にセットし、アンカーリンクのスクロール位置を補正します。
当ページのような可変Headerを使用したい場合に有効です。
Header要素に1つのdata属性を付与するだけで動作します。
Header要素のクラス切り替えをスクロールで制御します。
当ページのような高さ可変Headerを使用したり、メインビジュアルに合わせて背景色を変化させたい場合に有効です。
body直下に要素を設置し、1つのdata属性を付与するだけで動作します。
スクロール位置 (セクション) に応じてナビゲーションの状態を更新します。
ランディングページなどで、ユーザーがどこを読んでいるかの理解を促します。
監視対象セクションとナビゲーション項目に、1つのdata属性を付与するだけで動作します。
画面を下へと読み進めていくと、要素がフワッと出現するUXです。
セクションの区切りを明確にするのに役立ちます。
フワッと出現させたい要素に1つのdata属性を付与するだけで動作します。
パラメーターで様々な設定を制御できます。
よく見かける「トップへ戻る」ボタンを自動生成し、制御します。
モバイル閲覧時のストレス（スクロール疲れ、迷子など）を軽減する補助的なUXを目的として設置します。
フワッと出現し、ユーザーの邪魔にならない位置で自然に活用される設計を目指しています。
インスタンス化するだけで自動的にボタンが生成・制御されます。
パラメーターで出現のタイミングを制御できます。
よく見かける「ハンバーガーメニュー」のメニューとメニュー呼び出しボタンを自動生成し、制御します。
モバイル閲覧時、横一杯に収まり切らないメニューを収める目的として設置します。
メニュー開閉時の各所スムースな動きは、綿密なインタラクション設計が成されています。
インスタンス化するだけで自動的にボタンが生成・制御されます。
パラメーターでクローンするロゴ、メインメニュー、ソーシャルメニューを指定したり、独自テンプレートを指定することができます。
主にGoogleMapなど、埋め込みコンテンツに対して用いる補助的なUXです。
コンテンツにカバーを掛けて、一度タップ(クリック)操作してカバーを解除するまで、操作を受け付けません。
ユーザーに対してコンテンツが操作不能であることを、視覚的に伝えるため、演出を工夫しました。
GoogleMapなどのiframe要素をラップした要素に、データ属性を1つ付与するだけで動作します。
フェードアニメーションで画像が切り替わっていくカルーセルです。
フルサイズでメインビジュアルなどに使用するのに最適です。
このコンポーネントは美しく流れ変わる写真などに使用することを想定し、操作性を重要視していません。
仕様に沿ってdata属性を記述したHTMLの構成を組むことで動作します。
data属性のパラメーターでアニメーションの時間間隔を制御できます。
ギャラリーなどで写真を拡大表示するUXです。
全体としては小さく写真を並べたいけれど、写真自体はきちんと見せたい場合に有効です。
仕様に沿ってdata属性を記述したHTMLの構成を組むことで動作します。
スライドアニメーションで画像が切り替わっていくカルーセルです。
数多くのバナーやロゴなどを並べる際に使用するのに最適です。
先のFaderに比べ、操作性を重要視して設計しました。フリック・ドラグ操作などへの対応もスクラッチで作りました。
仕様に沿ってdata属性を記述したHTMLの構成を組むことで動作します。
data属性のパラメーターで様々な設定を制御できます。
ちいさな物語
屋号 QWEL の由来は、子ども向けプログラミング教室を開催しようと思い立ったとき、子どもが入力し易いキーボードの左上の配列 "Q", "W", "E" から決めました。最後の "L" は、総当たりで響きを重視しました。
だから、「優しさと共にある技術」がコンセプトです。
そして、"QWEL" の文字をプロペラ飛行機に模してデザインしたロゴには、機能と遊び心の両方を込めています。
「届けたい」と思って作ること。
「誰かの役に立ちたい」と願って飛ばすこと。
それが、QWEL の原点であり、これからも変わらない翼のかたちです。
QWEL にご興味を持っていただいた方には、GitHubから制作実績・プロフィールを見ていただいたり、お問い合わせフォームからご意見・ご感想をお寄せいただけますと嬉しいです。