小清水 和真 | WEBデザインMATOME

Author: 小清水 和真

WebディレクションからWebザイン・コーディングを主に行っております。 2021年株式会社を設立。講師もしております。

「整ってるHTML」はこう書く!読みやすいマークアップの黄金ルール

なぜ“動くHTML”と“評価されるHTML”は違うのか? 「動くHTML」と「整ってるHTML」は別物 HTMLを書き始めてしばらくすると、こんな経験をする人が多いはずです。 このとき、多くの人はこう思います。 「もっとCSSやJSを勉強しないとダメなのかも」 ですが、実務で本当に差がつくのはHTMLの“整い方”です。 整っているHTMLとは、 つまり、 人が読むことを前提に書かれているHTML この記事では、レビューで評価される「整ってるHTML」を書くためのマークアップの黄金ルールを、具体例つきで解説します。 「整ってるHTML」とは何か? まず定義をはっきりさせましょう。 ■ 整ってるHTMLとは 見た目ではなく“意味と構造”が整理されたHTML です。 よくある誤解はこれです。 これらは「最低条件」であって、整っている理由ではありません。 整っているHTMLは、次の特徴を持っています。 黄金ルール①「HTMLは見た目ではなく構造で書く」

Continue reading

再生ボタン付きで音あり動画はできる?

ブラウザ制限と正しい実装方法をわかりやすく解説 WebサイトやLP、ファーストビューで動画を使う場面は年々増えています。特に最近よく聞かれるのが、こんな疑問です。 「再生ボタン付きで、音あり動画ってできますか?」 結論から言うと、再生ボタン付きであれば、音あり動画は問題なく再生可能です。 ただし、自動再生との違いやブラウザの制限を理解していないと「音が出ない」「再生されない」といったトラブルに繋がります。 この記事では、 を、初心者の方にもわかるように解説します。 なぜ「音あり自動再生」はできないのか? まず押さえておきたいのが、**ブラウザ側の仕様(制限)**です。 現在の主要ブラウザ(Chrome / Safari / iOS / Android)では、 というルールが共通しています。 理由 突然音が鳴るとユーザー体験を大きく損なうため、「ユーザーの意思を伴わない音声再生」は制限されているのです。 そのため、以下のような実装は再生されない、もしくは音が出ません。

Continue reading

失敗から学ぶ!駆け出しコーダーがやりがちな5つの落とし穴

「できるようにならない人」と「一気に伸びる人」の分かれ道 失敗は“才能の有無”ではなく“通過点” HTMLやCSSを学び始めて、「なんとなく形が作れるようになってきた」頃。 多くの駆け出しコーダーが、こんな悩みにぶつかります。 そして、こう思ってしまう。 「自分には向いていないのかもしれない」 でも安心してください。それはほぼ全員が通る“成長途中の落とし穴”です。 重要なのは、どんな失敗をしているかその失敗から何を学ぶか。 この記事では、実務・学習の現場でよく見かける駆け出しコーダーがやりがちな5つの落とし穴を紹介しつつ、 を丁寧に解説していきます。 落とし穴①「とにかくコードを書けば上達する」と思ってしまう ■ よくある状態 一見、努力しているように見えますが、この状態が長く続くと成長が止まります。 ■ なぜ成長しにくいのか? 理由はシンプルです。 「なぜそのコードなのか」を考えていないから コードを書く行為自体は大事ですが、考えずに書く時間が増えると、 という状態になります。

Continue reading

デザインとコードの間にある“翻訳力”を磨こう

「再現できる」から「価値を生み出せる」Web制作者へ なぜ「翻訳力」がこれほど重要なのか? Web制作の現場で、こんな経験はありませんか? こうした問題が起きるたびに、多くの人はこう考えます。 「もっとCSSがうまくなれば解決するはず」「JavaScriptの知識が足りないのかも」 しかし、実務を重ねるほど気づくはずです。問題の本質は“技術不足”ではないと。 実はこれらの原因の多くは、 デザインとコードをつなぐ“翻訳力”の不足 にあります。 デザインとコードは、同じゴールを目指していながら、まったく違う言語で世界を表現しています。 この2つの間を正しく行き来できる人こそ、現場で「信頼されるWeb制作者」になります。 この記事では、デザインとコードの間にある“翻訳力”とは何かなぜAI時代にさらに重要になるのかどうすれば実務レベルで鍛えられるのか を、具体例とともに徹底解説します。 翻訳力とは「写す力」ではない まず大前提として押さえたいのは、 翻訳力 = デザインをそのまま再現する力ではない ということです。 ■

Continue reading

【WordPress 6.9対応】AIOSEOのタイトルが出ない原因と解決策|自作テーマで必須になった title-tag サポート

WordPressをアップデートしたあと、 「今まで表示されていたページタイトル(titleタグ)が突然消えた…」 という経験はありませんか? 特に 自作テーマ + All in One SEO(AIOSEO) の組み合わせで、WordPress 6.9 以降にアップデートしたタイミングで といった不具合が発生するケースがあります。 この記事では、WordPress 6.9以降で起きるこの現象について 原因最短で直す方法(結論)なぜ今まで問題なかったのか?確認手順自作テーマの運用で注意する点 までまとめて、再発しない形で解決できるように解説します。 結論:自作テーマに add_theme_support(‘title-tag’)

Continue reading

【WordPress】canonicalを自動生成する方法|SEOプラグイン無しでもOK!functions.phpで正規URLを出力する

WordPressのSEO対策で、意外と見落とされがちなのが canonical(カノニカル) の設定です。 canonicalはGoogleなどの検索エンジンに対して、 「このページの正規URLはこれです!」 と伝える重要なタグ。 正しく設定しておかないと… といったSEO上のトラブルにつながることがあります。 今回は、SEOプラグインを使わずに WordPressでcanonicalタグを自動生成して出力する方法を、実際のコード付きで解説します。 canonical(カノニカル)とは?なぜ必要? canonical(正規URL)とは、ページのHTMLの <head> 内に入れる下記のようなタグです。 このタグがあることで、検索エンジンは このページの本体(正規URL)はこれパラメータ違い・URL違いのページは同一扱いにする という判断ができます。 canonicalが必要になる典型例 URLが複数ある状態(重複コンテンツ) WordPressでは、同じ内容が違うURLで見れてしまうケースがよくあります。

Continue reading

AI時代のWebコーダーに求められる“考える力”とは?

コードを書く人から「設計して価値を出す人」へ AIで「コーディング」が簡単になった今、不安になるのは当然 ChatGPT、GitHub Copilot、各種AIエディタ…。2024年以降、Web制作の現場は“AI前提”へと急速に変わりました。 これまでコーダーの武器だった といったスキルが、AIの登場によって“加速”される一方で、こんな不安も生まれています。 「AIがコードを書けるなら、コーダーは不要になるのでは?」「自分の価値はどこにあるの?」「学ぶべきことは何が正解?」 結論から言うと、AI時代にコーダーが不要になることはありません。ただし、“作業者”としての価値は減り、「考える人」としての価値が一気に上がります。 この記事では、AI時代にWebコーダーが生き残るために必要な“考える力”の正体を、実務目線で徹底的に解説します。 第1章:AIが得意なこと・苦手なこと まず、AI時代に「何が変わったのか」を整理しましょう。AIが普及したことで、Web制作で次のことが一瞬になりました。 AIが得意なこと つまり、作るスピードは誰でも上がります。 でもここで重要なのは… AIは「正しいっぽい答え」を出すのは得意だが、「正しい設計」を決めるのは苦手 ということです。 AIが苦手なこと AIが出してくるコードはたいてい「動く」けれど、現場で求められる“最適”ではないことが多いのです。 「書く力」から「設計する力」へ価値が移動する これまでのコーダーの価値は、極端に言えばこうでした。

Continue reading

SEOを意識したHTMLコーディング:タグ構造とalt属性の最適化

〜検索に強いサイトは「HTMLの設計」が9割〜 SEOは「コンテンツ」だけでは勝てない SEOというと、多くの人が最初に思い浮かべるのは といった“コンテンツ側”の話だと思います。 もちろんそれらは重要ですが、実務の現場ではそれ以前に… HTMLが整っていないサイトは、内容が良くても正しく評価されにくい という事実があります。 検索エンジン(Googleなど)は、人間のように「雰囲気」でページを理解しません。HTMLの構造から、 を読み取り、評価します。 つまりSEOに強いHTMLとは、 検索エンジンが理解しやすい文章構造を、正しくマークアップできているHTML です。 この記事ではその中でも特に重要な に絞って、すぐ実装に使える形で解説します。 第1章:SEOを強くするHTMLの基本は「文書構造」 HTMLは見た目を作るためのものではなく、文書の意味を整理する言語です。 例として、以下のような“divだけのHTML”はSEO的に弱くなりがちです。 人間は見た目で理解できますが、検索エンジンは となりやすいです。 SEOに強い構造にするとこうなります。

Continue reading

WordPressテーマ化への第一歩:静的HTMLから動的サイトへ

〜「ただ作れる」から「更新できるサイトを作れる」へステップアップ〜 静的HTMLで作れるのに、なぜテーマ化が必要? HTML/CSSでサイトを作れるようになると、次にぶつかる壁があります。 「デザインはできた。でも更新が大変…」「文章を少し変えたいだけで、HTMLを開いて修正してアップするの面倒」「クライアントが自分で更新できるようにしたい」 これがまさに、静的サイトの限界です。 静的HTMLサイトは制作そのものはシンプルですが、運用になると一気に弱くなります。 そこで登場するのが **WordPressの「テーマ化」**です。 テーマ化とは簡単に言うと、 HTMLで作ったサイトを「WordPressの仕組み」に組み込み、管理画面から更新できる“動的サイト”に変える作業 です。 この記事では、静的HTMLをWordPress化するための考え方と手順を、実務で困らない形でわかりやすくまとめます。 静的サイトと動的サイトの違いを理解しよう まず、用語の整理から。 静的サイト(Static site) 特徴: 動的サイト(Dynamic site /

Continue reading

AI時代に絶対必要な“デザイナーの判断力”とは?

作る人から、選ぶ人へ。AI時代のデザイナーの価値 AIでデザインが作れる時代になりました。 この変化によって、デザイン業界には2つの空気が生まれています。 結論から言うと、どちらも正しいです。 なぜなら、“作業するデザイナー”の価値は下がり、“判断できるデザイナー”の価値は上がるからです。 この記事では、AI時代に必須となるデザイナーの判断力とは何か?そしてどう鍛えるか?を解説します。 ■ まず結論:「判断力」とは何か? AI時代の判断力とは、簡単に言うと 目的のために、最適な選択をし続ける力 です。 デザインはアートではありません。実務デザインはいつも、 その中で最適解を選ぶゲームです。 そしてAIは、選択肢を大量に出すことは得意でも、“どれが最適か”を決めることは苦手です。 だからこそ、判断力がある人が強くなります。 ■ AI時代は「案を出す人」より「案を選べる人」 AIが普及して起きた最大の変化は、 アイデア不足 →

Continue reading

WordPressで「管理画面だけ残して」それ以外をリダイレクトする方法(閉鎖・告知ページ誘導に便利)

サイト運営をしていると、こんな状況が発生することがあります。 このようなケースで便利なのが、 ✅ 「WordPressの管理画面以外は特定ページへリダイレクトする」設定です。 この記事では、実案件のURLなどは出さずに、サンプルURL(example.com)を使って、仕組みと実装方法をわかりやすく解説します。 「管理画面以外リダイレクト」の仕組みとは? ✅ 目的 Webサイトにアクセスがあった際に、以下のような挙動にします。 例) アクセス先 挙動 https://example.com/ → お知らせページへ転送 https://example.com/service/ → お知らせページへ転送 https://example.com/wp-admin/ 転送しない(管理画面へアクセス可能)

Continue reading

Figma × AIでポートフォリオを爆速で構築する方法

最短で「案件につながる形」に仕上げる実践ロードマップ ポートフォリオ制作で挫折する人は多いです。 そして最悪なのが、 ポートフォリオを作っているだけで時間が溶け、案件獲得が遅れる という状態。 結論から言うと、ポートフォリオは “作品集”ではなく“営業ツール” です。 だからこそ、完璧に作り込むより先に、最短で「受注に必要な形」まで持っていくことが重要です。 この記事では、Figma × AI(ChatGPTなど)を使って爆速でポートフォリオを構築する具体的な方法を解説します。 ■ なぜ「Figma × AI」がポートフォリオ制作に最強なのか? Figma × AIの強みはこの3つです。 つまり、

Continue reading

ChatGPTで作るデザインブリーフ(要件定義)テンプレート

― 迷わない・ブレない・修正が減る設計の作り方 ― デザイン制作で起きるトラブルの多くは、スキル不足ではなく「要件定義不足」が原因です。 これらを一気に解決するのが、デザインブリーフ(要件定義)です。 そして今、このブリーフ作成をChatGPTで半自動化できるようになりました。 この記事では、ChatGPTを使って「実務で通用するデザインブリーフ」を作る具体的なテンプレートと使い方を解説します。 ■ デザインブリーフとは何か? デザインブリーフとは、 「このデザインは、何のために、誰に、どう効かせるのか」を言語化した設計書 です。 見た目の指示書ではありません。 こうした曖昧な指示を、判断できる言葉に変換するためのドキュメントです。 ■ なぜChatGPTが相性抜群なのか? ChatGPTは、 つまり、要件定義に最適なパートナーです。 重要なのは、「考えさせる」のではなく「一緒に整理する」 使い方をすること。

Continue reading

SEOタイトルが反映されない原因はこれだった?

WordPressテーマが title-tag をサポートしていない問題と対処法 「AIOSEOでタイトルを設定しているのに、検索結果に反映されない…」「<title>タグが思った通りに出ない…」 そんな経験はありませんか? 実はこの問題、SEOプラグインの不具合ではなく、WordPressテーマ側の設定不足が原因であるケースが非常に多いです。特に WordPress 6.9 以降では、この仕様がより厳密になっています。 この記事では、 を、初心者にもわかりやすく解説します。 結論:テーマが title-tag をサポートしていないと、SEOプラグインは機能しない まず結論からお伝えします。 テーマが add_theme_support( ‘title-tag’ ) に対応していない場合、AIOSEOなどのSEOプラグインはタイトルを制御できません。

Continue reading

Swiperで作る“寄り→引き”ヒーロースライダー実装ガイド 〜ズーム方向指定・Ken Burns効果・進捗ラインまで〜

Webサイトのファーストビューでは、「ただ画像が切り替わるだけ」ではなく、写真そのものが語りかけてくるような演出が求められます。 最近よく見かけるのが、 といった、ホテル・ブライダル系サイトで使われる上品なヒーロースライダーです。 この記事では、Swiperを使ってこの演出を安全かつ自然に実装する方法を解説します。 なぜ「寄り→引き」が効果的なのか? 一般的なKen Burnsエフェクトは「ズームイン(寄り)」ですが、 という弱点があります。 そこでおすすめなのが、 表示直後は少し寄っていて、時間とともに引いていく という「寄り → 引き」構成です。 これにより、 という効果が得られます。 実装の全体構成 今回のスライダーは、以下の3要素で構成します。 重要なのは、すべてを同じ時間軸(autoplay delay)で同期させることです。 HTML(sample構造・簡略版)

Continue reading

AIが作ったUIをFigmaで整える「プロの仕上げ方」

― “それっぽい”を“使えるデザイン”に変える最終工程 ― AIでUIを作れる時代になりました。 しかし、こんな違和感を感じたことはありませんか? 結論から言うと、AIが作るUIは「下書き」としては優秀だが、「完成品」ではありません。 この記事では、AIが作ったUIを、Figmaで“プロのUI”に仕上げる具体的な思考と手順を解説します。 ■ なぜAIのUIは「惜しい」で止まるのか? AIが作るUIには、共通する特徴があります。 理由はシンプルです。 AIは「正解っぽい平均値」を作るが、「このUIで何を一番伝えたいか」は判断できない だからこそ、最後の仕上げ=人間の仕事になります。 ■ プロの仕上げは「装飾」ではなく「整理」 まず誤解を解いておきます。 仕上げ=影を足す/装飾を増やす仕上げ=情報と構造を整理する プロがまずやるのは、UIを“きれいにする”ことではなく、“分かりやすくする”ことです。 ■ 全体フロー:AI

Continue reading

Midjourney × Figmaで作る最強ビジュアル素材|デザインの説得力を一段上げる実践ガイド

「デザインは悪くないのに、なぜか弱い」「レイアウトは整っているけど、印象に残らない」「フリー素材だと、どうしても“既視感”が出る」 そんなときに差を生むのが、オリジナルの“ビジュアル素材”です。 そして今、そのビジュアル制作を一気に加速させるのがMidjourney × Figma の組み合わせ。 この記事では、Midjourneyで生成したビジュアルを、Figmaで“使える素材”に仕上げる実践的な方法を解説します。 なぜ「Midjourney × Figma」が最強なのか? まず役割をはっきりさせましょう。 つまり、 生成(Midjourney) × 編集・設計(Figma) この分業が、スピード・独自性・実務適性をすべて満たします。 ビジュアル素材は「アート」ではなく「部品」 重要な考え方があります。 きれいな画像を作る使えるビジュアル素材を作る 最強ビジュアルとは、

Continue reading

FigmaデザインをAIに添削してもらう方法|最短で成長するレビュー活用術

「Figmaでデザインは作れるようになったけど、これが“良いデザイン”なのか分からない」 「誰かにレビューしてほしいけど、毎回聞ける人がいない」 そんな悩みを持つ人にとって、AIは最強の“添削パートナー”になります。 重要なのは、AIにデザインを 作らせること ではありません。 自分が作ったデザインを、どう直すかを教えてもらうこと この記事では、Figmaで作ったデザインをAIに添削してもらい、最短で成長する具体的な方法を解説します。 なぜ「添削」が一番成長につながるのか? 多くの人がやっているAI活用は、こうです。 これでも便利ですが、成長スピードはあまり上がりません。 一方で、添削は違います。 思考 → 指摘 → 修正このループが、圧倒的に力を伸ばします。 AI添削が人間レビューと相性がいい理由 AI添削の強みは、 特に初心者にとっては、

Continue reading

AIで作る配色・コピー・構成:Figmaでの自動化ワークフロー【詳細解説版】

デザイン制作で最も時間を奪われるのは、実は「手を動かす時間」ではありません。 この “考える前工程” に、全体の7〜8割の時間が使われています。 そこで有効なのが、AIを使った配色・コピー・構成の自動化 → Figmaで形にするワークフローです。 この記事では、AI × Figmaを組み合わせて「迷わず進める」ための詳細な実践手順を解説します。 ■ このワークフローで目指すゴール 最初にゴールを明確にします。 このワークフローの目的は、 ことではありません。 「白紙で悩む時間をなくし、人間は判断と調整に集中する」これが本質です。 ■ 全体像:AI × Figma

Continue reading

デザインAI時代の学習法:人間が学ぶべき本質とは?

「AIがデザインを作ってくれる時代に、人間はもうデザインを学ばなくていいのでは?」 最近、こんな疑問を持つ人が増えています。確かに、AIはレイアウトを作り、配色を提案し、ボタンやUIまで一瞬で生成してくれます。 ですが結論から言うと、AI時代だからこそ、人間が学ぶべきことは“減る”のではなく“変わる” のです。 この記事では、デザインAI時代において人間が学ぶべき本質的なスキルと、これからの正しい学習法について解説します。 ■ AIは「デザインを作れる」が「判断」はできない まず大前提として押さえておきたいのが、AIが得意なのは 生成 であって、判断 ではありません。 AIは、 ことは得意です。 しかし、次のような判断はできません。 価値を決めるのは、常に人間 です。 ■ デザインの価値は「見た目」から「意味」へ移った AI以前の時代、デザイナーの価値はこうでした。 しかし今、「作れること」自体は価値になりにくくなっています。

Continue reading

横スライドしながら拡大するスライド演出の作り方〜ズームインで魅せる、上質なキービジュアル表現〜

Webサイトの第一印象を大きく左右するのが、トップページに配置されるスライド(キービジュアル)です。最近では、単に横に切り替わるだけのスライドではなく、 といった、高級感・没入感のある演出が好まれる傾向にあります。 本記事では、「横スライド × ズームイン」 を組み合わせたスライド演出の考え方と実装例を、サンプルコード付きでわかりやすく解説します。 なぜ「ズームイン × 横スライド」が効果的なのか 横スライドだけの場合、どうしても「機械的」「事務的」な印象になりがちです。そこに 拡大(ズームイン) を加えることで、次のような効果が得られます。 特に、 などでは非常に相性の良い表現です。 実現方法の考え方(重要) 今回のポイントはとてもシンプルです。 つまり、 動きの制御はスライダーに任せ、見た目の演出はCSSに任せる という役割分担が重要になります。 サンプル構成(イメージ)

Continue reading

Figma × AIで最速成長!初心者でもできる学習ブースト術

「Figmaを勉強しているけど、成長している実感がない」「チュートリアルは見ているのに、作れるようにならない」「何をどう練習すればいいのか分からない」 そんな悩みを抱える初心者にこそ、Figma × AIの組み合わせは最強の学習ブーストになります。 AIは、デザインを丸投げするためのものではなく学習スピードを何倍にもする“相棒”。 この記事では、初心者でも今日から実践できる「Figma × AI学習術」 を、具体例つきで解説します。 ■ なぜ今「Figma × AI」なのか? 従来のFigma学習は、こうでした。 一方、AIを使うと 「考える時間」が圧倒的に増えるこれが成長スピードの差です。 ■ AIは「先生」ではなく「壁打ち相手」 まず大事な前提として、 AIに正解を作らせない

Continue reading

Figmaで作る“修正しやすいデザイン”の作り方|直しやすさは設計で決まる

「修正が入るたびにデザインが崩れる」「どこを直せばいいのか分からなくなる」「修正対応がストレスで、正直つらい」 Figmaを使ったデザイン制作で、こんな経験はありませんか? 実はこれ、デザインが下手だからでも、Figma操作が苦手だからでもありません。 原因はほぼ一つ。 最初から“修正される前提”で設計していないこと この記事では、お客様からの修正に強く、直すたびに評価が上がるデザインの作り方をFigmaの設計視点で解説します。 ■ なぜ「修正しにくいデザイン」は生まれるのか? 修正が大変なデザインには、共通点があります。 これらはすべて、「完成形だけを見て作っている」状態です。 実務では、デザインは完成して終わりではなく、 修正されて、育っていくもの だからこそ、最初から「直しやすさ」を設計に組み込む必要があります。 修正しやすいデザインの大原則(結論) まず、これだけ覚えてください。 修正しやすいデザイン 3原則 これができていれば、修正対応は一気にラクになります。 ■ Step1:グループではなく「Frame+Auto

Continue reading

Contact Form 7でエラーを一つにまとめてポップアップ表示する方法【完全解説】

Contact Form 7(以下CF7)は、WordPressで最も利用されているお問い合わせフォームプラグインの一つです。しかし、標準のエラー表示について、次のような不満を感じたことはないでしょうか? この記事では、CF7のエラー表示を一つにまとめ、ポップアップ(モーダル)で表示する方法を、実装手順付きで分かりやすく解説します。 プラグインの追加は不要で、JavaScriptとCSSのみで対応可能です。 この記事でできること Contact Form 7の標準エラー表示の問題点 CF7のデフォルト仕様では、以下の2種類のエラー表示があります。 この仕組み自体は親切ですが、 といったUX上の課題があります。 解決策:エラーをまとめてポップアップ表示する CF7には、バリデーションエラー発生時に実行されるJavaScriptイベントが用意されています。これを利用することで、エラー情報を取得し、まとめてポップアップ表示できます。 実装の流れ 順番に見ていきましょう。 ① デフォルトのエラー表示を非表示にする(CSS) まずは、CF7標準のエラーメッセージを非表示にします。 ※

Continue reading

お客様に信頼されるデザインの提出方法とマナー|受注後に評価を下げないための基本

「デザインは気に入ってもらえたはずなのに、反応が悪い」「修正が増えて、やり取りがギクシャクした」「次の案件につながらなかった」 こうしたトラブルの多くは、デザインのクオリティではなく「提出の仕方」と「マナー」 が原因です。 実際のところ、クライアントがデザイナーを評価するときに見ているのは、 と言っても過言ではありません。 この記事では、お客様に「この人に任せてよかった」と思われるデザイン提出の方法とマナー を、初心者〜実務初期の方にも分かりやすく解説します。 なぜ「提出方法」が信頼を左右するのか? クライアントにとってデザイン提出とは、 成果物の確認+仕事ぶりの評価タイミング です。 このとき、無意識に以下をチェックしています。 つまり、提出=営業の続き なのです。 信頼されない提出でよくあるNG例 まずは、やりがちな失敗から確認しましょう。 デザインだけポンと送る「ご確認お願いします。」だけの一文修正点を想定していない専門用語だらけの説明ファイル名が雑(final_最終_修正2.fig など) これらはすべて、「相手の立場を考えていない」と受け取られる可能性 があります。

Continue reading

Figmaで作る営業用ポートフォリオ:受注率が上がる構成とは?

「ポートフォリオはあるのに、なぜか仕事につながらない」「デザインは評価されるけど、受注までいかない」 そんな悩みを持つFigmaユーザーはとても多いです。 結論から言うと、受注できない原因はデザイン力ではなく、ポートフォリオの“構成” にあります。 営業用ポートフォリオは、オシャレさを見せるものではなく「この人に頼む理由」を作る資料 です。 この記事では、受注率が上がる営業用ポートフォリオをFigmaで作るための構成・設計・見せ方を解説します。 営業用ポートフォリオと作品集の違い まず、ここをはっきりさせましょう。 作品集ポートフォリオ 営業用ポートフォリオ 営業用は「説明できるデザイン」が必要です。 営業用ポートフォリオで必ず見られているポイント クライアントは、実はここしか見ていません。 デザインの細かい装飾より、「仕事として任せられるか」 が判断軸です。 受注率が上がるポートフォリオ全体構成(結論) 営業用ポートフォリオは、以下の 7セクション構成 が最も効果的です。

Continue reading

Figmaで作るレスポンシブデザイン:PC/SP両対応のコツ完全ガイド

Figmaでデザインを作っていて、こんな悩みはありませんか? 実はこれ、センスや経験の問題ではありません。原因のほとんどは、レスポンシブ前提で設計していないことFigma特有の考え方を知らないことです。 この記事では、FigmaでPC/SP両対応のレスポンシブデザインを作るための考え方と具体的なコツ を、初心者にも分かる言葉で解説します。 そもそもレスポンシブデザインとは? レスポンシブデザインとは、 画面サイズが変わっても、情報の意味と使いやすさを保つ設計 のことです。 重要なのはPCデザインをそのまま縮めることではなく情報の並び・優先度・見せ方を変えること Figmaでは、「構造」「Auto Layout」「Constraints」 を正しく使うことで、この考え方を安全にデザインへ落とし込めます。 レスポンシブ設計の全体像(先に結論) Figmaでレスポンシブ対応する基本構造はこれです。 つまり、小さい単位から順にレスポンシブ対応 していくのが正解です。 ■ Step1:最初に決める「基本ブレークポイント」 まずは、よく使われる基本サイズを押さえましょう。 ■

Continue reading

実案件で困らない!CSSバグ対応&ブラウザ検証の基本

〜「なぜか崩れる…」を最短で解決するための思考と手順〜 CSSバグは「誰でも踏む」 Web制作の実案件で、ほぼ確実に直面するのがCSSバグです。 これらはスキル不足ではなく、CSSとブラウザの仕様差による“あるある”。重要なのは「バグを出さないこと」ではなく、どう対応するかです。 この記事では、 を、初心者〜実務レベルまで通用する形で解説します。 CSSバグはなぜ起きるのか? まず大前提として知っておきたいのは、 CSSは「絶対に同じ見た目になる言語」ではない ということです。 CSSバグの主な原因 ① ブラウザごとの仕様差 ② レイアウト手法の影響 ③ コンテンツ差し替え耐性の不足 実案件のCSSバグは「想定外」が原因です。 CSSバグ対応の正しい思考フロー CSSバグ対応で最も重要なのは、「闇雲にいじらないこと」です。

Continue reading

コンポーネント設計の正解:Figmaで作る“再利用できるUI”完全ガイド

Figmaを使っていて、こんな悩みはありませんか? それ、コンポーネント設計の「考え方」を知らないだけです。 コンポーネントは上級者向けの難しい機能ではなくUIを安定させ、作業をラクにするための設計手法。 この記事では、 を、順番に・分かりやすく解説します。 そもそもコンポーネントとは何か? コンポーネントを一言で言うと、 「何度も使うUIを、1つの原本として管理する仕組み」 です。 コンポーネントの基本構造 原本を直すと、すべてのコピーに反映される。 つまり、「一括修正」と「UIの統一」ができる のが最大のメリットです。 なぜコンポーネントを使わないとUIは破綻するのか? コンポーネントを使わない場合、こんなことが起きます。 これは、「UIを部品として扱っていない」 から。 実務では、同じUIを何度も使う前提で設計します。 コンポーネント設計の大原則(超重要) まず、この3つだけ覚えてください。

Continue reading

Figmaで作る“崩れないUI”の設計術:Auto Layout完全攻略ガイド

Figmaを使っていて、こんな経験はありませんか? 実はこれ、Auto Layoutの使い方が間違っているのではなく、“設計の順番”と“考え方”を知らないだけ というケースがほとんどです。 この記事では、 を、初心者にも分かる言葉で完全攻略 します。 なぜAuto LayoutでUIは崩れるのか? 結論から言うと、原因はほぼこの3つです。 Auto Layoutは「魔法」ではなく、ルール通りに組めば必ず安定する仕組み です。 逆に言えば、設計を考えずに使うと100%崩れます。 崩れないUIの基本原則(超重要) まず、これだけは必ず覚えてください。 Auto Layout設計の3原則 この3つを守るだけで、Auto Layoutの失敗は激減します。

Continue reading