マイクロインタラクションとは マイクロインタラクションとは、機能に存在する小さな振る舞いや、挙動のデザインをいいます。具体的な役割としては下記になります。 フィードバックや操作の結果をユーザーに伝える 操作が正常に完了したことをユーザーに伝え…

はじめに 今回はタブをクリックして、各コンテンツの表示切り替えをさせる処理を、jQueryを利用して実装しました。 実装方法 html まずは今回はタブを３つ用意します。それらのタブに関連したコンテンツも同じく3つ用意しますが、初期表示されるものは1つだ…

はじめに 近年はWEBサイト制作作業において「タスクランナー」というツールが注目されているそうなので、実際に導入してみました。 タスクランナーとは ウェブ制作における様々な処理のことを「タスク」といいます。 例えば、WEBサイト制作作業では、コーデ…

はじめに 色は人に印象を与えます。しかし、閲覧環境によって色の差が認識しづらかったり、ディスプレイの性能によって細かな色の差を表現できない場合もあります。また、WEBサイトを利用する方が目に疾患があれば見え方も変わってきます。 また、WEBサイト…

はじめに 広告やWEBサイトなどを製作するうえで、配色によってデザインの印象が変わってきます。たとえ同じデザインでも、明るくにぎやかな印象もあれば、逆に落ち着いた印象を与えることもあります。色はデザイン要素としても人の心を動かす情報が大きく、…

絶対値を多用しない はじめに コーデイングをしていく際にデザインカンプのフォントサイズと行間の値を測った後に、制作中のサイトに対してCSSで適応していく流れになると思います。その際に絶対値を無意識に使うことはないでしょうか。 今回はフォントサイ…

より良いCSSのゴール 予測しやすい 「イメージ通りの体裁になるか」ということです。 他のルールが影響してイメージ通りの体裁にならない、追記したルールが影響して他の箇所の体裁が崩れてしまうなどを防ぐことです。 再利用しやすい 「抽象的で機能ごとに…

「vh・vw」について cssの値に指定できる単位は「px」や「%」以外に「vh・vw」があります。この「vh・vw」単位は、ビューポートを基準としたものです。 ビューポート (Viewport)とは、ブラウザウィンドウの表示領域のことを指します。 この「vh・vw」の単位…

WEBグラフィック作成の注意点 ①webセーフカラーを使用する 作業中に使用しているカラーは必ずしも他ユーザーのブラウザで同じように表示されるとは限らない。▼予防措置としての対策・常にRGBカラーモードで作業を行なう・WEBセーフカラーを使用する ②画質と…