- UI/UX
提案力アップのカギ！Bento Boxレイアウトに挑戦しよう
Webディレクター必見！情報が多いページをすっきり見せる「Bento Boxレイアウト」の実装法を解説。素のCSS GridからBootstrap、MixItUpを使った動的レイアウトまで5パターンを紹介。提案力を高めたい方に役立つ実践的なコーディング視点のノウハウです。
- UI/UX
「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.6 静的デザインが実装の手間を増やす理由 ─ 状態・変化を想定した設計のすすめ
一見完璧な静的デザインでも、実装で手が止まることがあります。その原因は“状態変化”や“動的な挙動”の情報不足です。本記事では、hoverやエラー表示、繰り返しUIの考慮など、実装者が判断に迷わないために必要な設計の視点を具体例を交えてご紹介します。
- UI/UX
GoogleマップをWebサイトのデザインに合わせてオシャレにする方法
こんにちは。FASTCODINGデザイナーの七転び八重子です。 GoogleマップをWebサイトのデザインに合わせてカスタマイズする方法をまとめました。 サイトのカラーとマップのカラーを合わせることで、サイトの統一感が増 […]
- UI/UX
縦に長くなってしまうスマホページの情報設計はどうする？ 最適化して見やすいページにする方法
こんにちは。FASTCODING UI/UXデザイナー、一富士二鷹三茄子です。 現在WEBサイトはレスポンシブで制作されることがほとんどですが、その場合スマホサイトが縦に長くなりすぎてしまうという問題があります。 スマホ […]
- UI/UX
【Illustrator実践】マスコット人形の写真をイラストにしてみよう。
こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webデザイナーが、絵を描いたり、ロゴを作成したりする時に使うツールがIllustrator（イラストレーター）です。イラストレーターは、ベクタ形式です。文 […]
- UI/UX
Can I Use （ブラウザの対応表）をブログに埋め込む
こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、Can I Use （ブラウザの対応表）をブログに埋め込んでみたいと思います。 Web業界では、皆さんが利用されている便利サイトだと思いますが、最新 […]
- UI/UX
Googleの新しい検索ランキング指標「Core Web Vitals」とは
こんにちは。FASTCODINGデザイナーの七転び八重子です。 Googleは2020年5月28日、検索ランキングの要因に、Webページの「ユーザーエクスペリエンス」をより重視することを発表しました。これまでの基本指標に […]
- UI/UX
【保存版】CSS Flexbox プロパティまとめ
こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回「Flexbox（フレックスボックス）」を使ったレイアウトの仕方をまとめてみました。今回は、親要素（.flex-container）と子要素（.flex […]
- UI/UX
UIデザインツールFigma②実践編
こんにちは。FASTCODINGデザイナーの七転び八重子です。 前回UIデザインツール「Figma（フィグマ）」の入門編で、料金プランからアカウント登録、初期設定までをまとめました。今回は、実践編です。基本的な操作方法を […]
