サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.1 なぜ“デザイン通り”に見えない？実装現場が語る、再現性の限界と理由 1. はじめに：なぜ“デザイン通り”にならないのか？Webディレクターとして、こんな経験はありませんか？ 「Figmaでは完璧だったのに、コーディング後に見たら何か違う…」 「ボタンの位置、ズレてない？」 「このフォント、ちょっと太く見えない？」 Webディレクターの方から、これまでに何度もいただいてきた言葉です。 一見すると「コーダーのミスでは？」と思われがちですが、フロントエンドのコーディング代行を専門にしている私の立場から言うと、“技術的な限界”や“前提の違い”が原因であるケースがほとんどです。 そして、それは決して「ミス」や「再現不足」ではなく、再現“できない”もしくは“すべきでない”ことさえあるというのが、現場での実感です
手順①好きなサイトのURLをコピー ②Figmaに配置（html.to.design） ③STUDIOでリリース（Figma to STUDIO） それぞれ解説していきます！（Figma、STUDIOは登録している前提） 私は【AI × デザイン】を各種SNSで発信しています。AI活用してデザインの外注費をおさえたい方や、デザイナーが効率化・アイデア拡張するための情報をお届けしていますので、ぜひフォローをお願いします。サクッとインプットできる学びの場をご提供します。 X：https://x.com/kawai_designnote：https://note.com/kawaidesignNewsPicks：https://newspicks.com/topics/ai-design/ Voicy：https://voicy.jp/channel/820890 MENTA：https:
リリース以来数多くのアップデートが行われ、多機能になっていくFigma。今回はそんなFigmaの基本機能を使用した、簡単なデザイン作成やあしらいづくりに活かせる表現TIPSを紹介します。 テキストの表現マスク機能やエフェクト、そしてレイヤーのブレンドモードを使用したテキストの表現をいくつか紹介します。 TIPS：画像をテキストでマスクするマスク機能を使用して、画像をテキストの形に切り抜きます。 以下の手順で切り抜きます。 画像とテキストレイヤーを用意 画像が前面になるようにして、画像とテキストレイヤーを重ねる 両方のレイヤーを選択状態にして、右クリックメニューから［マスクとして使用］を選択（ショートカットキーは、Mac：control + command + M、Windows：Ctrl + Alt + M）マスクした後も、テキストレイヤーは編集可能です。 さらに画像をレイヤーブラー
WebページのURLを入力し、1クリックするだけで、そのページの編集可能なFigmaファイルに変換できる無料プラグインを紹介します。 去年紹介しましたが、先日ver.2にアップデートされました！ 一括インポート、マルチビューポート、マルチテーマ、テキストとカラーのスタイル生成ができるようになり、さらに便利になりました。AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。html.to.design -Figmaデスクトップとスマホも同時に！ 1クリックでWebページをFigmaに変換html.to.designの利用方法html.to.designの使い方 1クリックでWebページをFigmaに変換html.to.designは、URLを入力して1ク
Goodpatchエンジニアの池澤です。デザインツール「Figma」のスタイルや値を、テキストエディタ「VS Code」上で閲覧できる「Figma for VS Code」機能拡張が2023年6月よりFigma公式から提供されています。 この記事ではその「Figma for VS Code」について、実際に試して感じたことをまとめてみました。 ※Figma Dev ModeやFigma for VS Codeはまだベータ版で動作保証されておりません。また本記事の内容は個人が趣味で検証したことをご理解の上、自己責任にてご利用ください。Figma for VS Codeとは 主な使い方 使用時のワンポイント Point1：Figmaのトークンの名前と値が確認できる Point2：FigmaのSectionやReady for devマークの有無はあまり気にしなくて良い Point3：
この記事ではワイヤーフレームを作成するとき、FigmaやXDを開いて手を動かす前に、情報設計をどのように整理し、考えていくかについてまとめています。記事内でWebサイトでワイヤーフレームを作成するときに注意したい点として、下記のように書きました。 ツールを立ち上げてアレコレと考えながら手を動かすとフォントやレイアウトにこだわりだしたりしてしまい、あっという間に時間がなくなってしまいます。考えてから形に落とすことを徹底するためにIA（情報設計）を考え抜くことが大切です。 0. 情報設計とトンマナ設計を分けて考える情報の優先度、情報の量、情報の回遊性といったIA（情報設計）を考え抜くことはワイヤーフレーム作成において最も重要です。IAを考え抜いたその後に、FigmaやXDを使ってワイヤーフレームを形にしていきます。では実際にワイヤーフレームを形にしていくとき、どのような工程で進めていくと良いか
Adobe XDとFigma、どちらもよく使う、どっちも好きという人が増えてきましたね。 共通点も多いアプリだからこそ、「どっちがどっちだっけ」と混乱しないように、違いをざっくりまとめました。 気づいたらまた更新します！ よく使うショートカット図形ツールスタックとオートレイアウトリピートグリッドの代わりに・・・Figmaには、Adobe XDのように、リピートグリッドや、シェイプに画像をドラッグして配置する機能がありません。 下記の工程で、「リピートグリッドに画像を一気に流し込み」っぽいことをFigmaですることができます。 （リピートグリッドの便利さにはかないませんが・・・） 「リピートグリッドに画像を一気に流し込み」っぽいことをFigmaでする方法🍀 Illustratorみたいに「⌘ + Dで繰り返し」ができるのが嬉しい😊 画像の配置：shift + ⌘ + Kも早めに覚えてしま
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
