- UI/UX
このデザイン、どうコーディングする? #4|Figmaだけにある“あのマージン指定”、CSSで正しく落とし込む方法
Figmaでよく見られる「左右40pxの余白、中央800px」レイアウトをCSSに落とし込む方法を解説します。最適な組み合わせは、padding-inline、max-width、margin-inline: autoです。この設計により、視覚的な余白と構造の把握が容易になります。
- UI/UX
【このデザイン、どうコーディングする? 】#02「Pinterest風の高さバラバラな要素をスマートに整列させる方法」
Pinterest風のグリッドレイアウトを実装する方法について解説します。CSS Gridのgrid-auto-flow: denseやマルチカラムレイアウトを使用し、高さの異なるカードを整然と並べます。使用ケースやメリット・デメリットを考慮し、実務に役立つ技術を提案しています。
- UI/UX
「Webアクセシビリティ」とは? デザイン制作に意識すべきこと
こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 現在はインターネットを通じ、いつでも・誰とでも簡単にコミュニケーションを取ることが出来ます。デジタル技術の進歩により様々な事が出来るようにな […]
- UI/UX
2024年はWebアクセシビリティが義務化?!今こそ早期対応を!
こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 前回、「Webアクセシビリティ」について触れましたが、2024年4月に施行される「改正障害者差別解消法」により、全事業者に対して「合理的配慮 […]
- UI/UX
【UI Design Tool】 Figmaと XDとSketchの分かりやすく比較まとめ
こんにちは。FASTCODINGデザイナーの七転び八重子です。 UIデザインツールと言えば、Figma、Adobe XD、Sketchなどが代表的ですが、2020年頃を境にFigmaユーザーが圧倒的に増えました。 そこで […]
- UI/UX
【2023年12月】推奨Webサイト横幅サイズとファーストビュー結果
こんにちは。FASTCODINGデザイナーの七転び八重子です。 半年ごとの恒例テーマ、2023年も残り1ヶ月となってきたので、早速「Webサイトのベストな横幅サイズ(コンテンツ幅)」をチェックしていきます。 参考サイト […]
- UI/UX
「フレーミング効果」を利用して売り上げアップ! UI/UXデザインに使える具体例をご紹介。
こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 フレーミング効果についてご存知でしょうか?心理現象の一つである「フレーミング効果」は、UI・UXにも活用できます。この効果を利用する事でユー […]
- UI/UX
マイクロコピーとは?効果的な活用方法をご紹介!
こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 Webサイトを改善して成果を上げるためには数値を把握し、小さな改善を積み重ねていく事が大切ですが、その中でも費用対効果が高く、手間をかけずに […]
- UI/UX
ファーストビューを改善してCVアップ! 制作のポイントとは?
こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 ファーストビューはWebサイトの顔であり、企業の強みをアピール出来る重要な部分です。 コンバージョンにも影響する為、状況に応じて最適化する必 […]