Webページではコンテンツの掲載方法としてアコーディオンメニューをデザインとして実装することがあります。状況によって1ページに膨大なコンテンツとなり得るQ&Aなどで利用することがあるでしょう。 アコーディオンメニューはクリックアクシ...
続きを読む>>

昨今のWebサイトのフォームデザインでは、UXの面でユーザーにストレスなくわかりやすいデザインが求められます。ラベルや入力フィールドをグループ化したレイアウトからプレースホルダテキスト、ヘルプテキスト、エラー表示などなど、フォームのデザイン...
続きを読む>>

スムーズで快適なスクロールはUIの一部として採用するサイトも増えて、表示領域にピタッと合わせるスクロール処理は、主にJavaScriptやJavaScriptライブラリであるjQueryを使って実装することが多いかとおもいます。 もちろん、...
続きを読む>>

CSS3から追加されたFlexboxは、PCからタブレット端末、スマートフォン端末に対応したレスポンシブWebデザインのレイアウト構築に優れています。要素の横並びから要素の高さを揃えたり、また上下左右中央寄せなども手軽に実装することができま...
続きを読む>>

webデザインでwebフォントを利用してデザインを構築していくことがよくあります。そこで使えるのがCSSの@font-face規則です。 @font-face規則はwebフォントを利用するために用意された規則です。webフォントで有名なのが...
続きを読む>>

webサイトでアニメーションを実装する中で、JavaScriptなどのプログラミングではなくCSSのみでデザインできることも増えてきました。 今回は、CSSのfont-variation-settingsプロパティを利用したテキストの可変ア...
続きを読む>>

昨今、WindowsやMacといったOSからアプリケーション、webサイトなどなど何かとダークモードに対応してきています。 普段からPCやタブレット、スマートフォンといったコンピュータに触れる機会が多くなり、デザインの配色によっては長時間利...
続きを読む>>

Webサイトの構築の際にCSS3でアニメーションを実装することはよくありますが、ユーザーによっては動かされても見にくかったり操作しづらいと感じることもあります。 例えばiPhoneユーザーですとスマートフォンの視差効果を嫌う方もいます。 i...
続きを読む>>

Webページの構成の中で各セクションごとで見出しを載せてコンテンツを作っていきますが、コンテンツをよりわかりやすく見せるデザインとしてコンテンツごとに見出しをヘッダーに固定するといったデザインを採用しても面白いかもしれません。 グローバルナ...
続きを読む>>

Webデザインをする中で画面全体に背景画像を表示させるといったデザインにすることはよくあります。画像を大きく見せることで大きなインパクトを与えることができてWebサイトの印象からいろんなメッセージを使えることができます。 実際にHTMLとC...
続きを読む>>