- 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年も残り１ヶ月となってきたので、早速「Webサイトのベストな横幅サイズ（コンテンツ幅）」をチェックしていきます。 参考サイト […]
- UI/UX
「フレーミング効果」を利用して売り上げアップ！ UI/UXデザインに使える具体例をご紹介。
こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 フレーミング効果についてご存知でしょうか？心理現象の一つである「フレーミング効果」は、UI・UXにも活用できます。この効果を利用する事でユー […]
- UI/UX
マイクロコピーとは？効果的な活用方法をご紹介！
こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 Webサイトを改善して成果を上げるためには数値を把握し、小さな改善を積み重ねていく事が大切ですが、その中でも費用対効果が高く、手間をかけずに […]
- UI/UX
ファーストビューを改善してCVアップ！ 制作のポイントとは？
こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 ファーストビューはWebサイトの顔であり、企業の強みをアピール出来る重要な部分です。 コンバージョンにも影響する為、状況に応じて最適化する必 […]
