月曜日 10:00 - 18:00 火曜日 10:00 - 18:00 水曜日 10:00 - 18:00 木曜日 10:00 - 18:00 金曜日 10:00 - 18:00

ウェブサイトとは何ですか？

http://www.k2-interactive.co.jp/

株式会社ケイツー・インタラクティブ, 東京都台東区浅草1-13-5 井門浅草すしや通りビル 4F-12, Taito-ku (2026)

24/04/2026

自治体ホームページ制作支援ページを公開しました。

ホームページの見直しが必要だと感じていても、
「何を基準に考えればよいのか」
「庁内でどう説明すればよいのか」
で止まってしまうことがあります。

そうした段階からご相談いただける内容です。

https://www.k2-interactive.co.jp/guide/gov.php

22/04/2026

# コンテンツ最適化で押さえるべき4つのポイント

# # コンテンツを増やしても成果につながらないとき
ページに情報を追加しているのに、
反応が伸びない。
そんなときは、
内容の不足だけでなく、
目的や見せ方に
問題があるかもしれません。

何を達成したいページなのかが
曖昧なままでは、
情報を増やしても
伝わりにくい状態が続きます。

# # コンテンツは4つの視点で設計する
コンテンツ最適化では、
次の4つのポイントを押さえる必要があります。

- 目的
- 構造
- 表現
- 補助

まず、
何を達成したいのかを明確にし、
その目的に沿って
情報の配置と優先順位を決めます。

次に、
読みやすく
理解しやすい文章で伝え、
図や表などの
補助要素で補強します。

この4つが揃うことで、
コンテンツははじめて機能します。

┌──────────────────┐
✓ Check Point
└──────────────────┘
　・目的を明確にする
　・配置と優先順位を決める
　・読みやすい文章で伝える
　・図や表で理解を支える

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
コンテンツを作る時、
つい伝えたいことばかりを盛り込んでしまう。
現場、あるあるです。

そのとき起こる問題は、
相手と伝える側に
温度差や情報格差があることです。

前提条件を知らないユーザーが、
設計されていない情報に触れたとき、
思考負荷はかなり大きくなります。

欲しい情報を得られずに、
負荷ばかりがかかるページからは、
ユーザーは離脱してしまいます。
とどまる理由がないからです。

伝える側は、
温度差、
情報格差を意識しながら、
伝える情報の強度や明度を
意識して設計することを
おすすめいたします。

✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦
『(コンテンツ最適化で押さえるべきイント([https://www.k2-interactive.co.jp/hpplace/hp_ans6.php]』の元記事は、Web改善ラボの「Webサイトのコンテンツ改善とは？成果を出すための4つのポイント」で、現場の流れに沿って、もう少し詳しく解説しています。
✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

著：永田勝也 (UX/IA Architect) / K2（ケイツー・インタラクティブ）

17/04/2026

# キーボード操作で確認するアクセシビリティ

# # 外出先での不便で気づくアクセシビリティの課題
外出先でノートPCを使うと、
キーボード中心で
操作する場面が出てきます。

そのとき、
Tabキーでうまく移動できない、
選択中の場所が見えない、
といった問題に気づくことがあります。

これは一時的な不便の話ではありません。
キーボードだけで使いにくい状態は、
アクセシビリティの基本が
満たされていないサインです。

# # キーボード操作でのテスト
アクセシビリティ対応の確認のひとつに、
「キーボードだけで操作できるか」があります。

Tabキーでリンクやボタンに順番に移動できるか。
Enterキーやスペースキーで操作を実行できるか。
そして、今どこを選んでいるのか

それらが視覚的に分かるか。
この基本ができていないと、
キーボードで使う利用者が、
必要な操作を途中で
断念せざるを得ないことがあります。

# # # テストで特に注意して確認したいところ
- *フォーカスが見えるか*
Tabで移動しても
今どこにいるか分からない状態に
ならないようにします。
- *途中で止まらないか*
ヘッダー、メニュー、ボタン、フォームで
移動がスムーズにできるようにします。
- *見た目だけ押せそうな要素*
見た目はボタンでも、
キーボードでは反応しないことがあります。
見た目と操作のずれがないかを確認します。
- *ポップアップやメニューの開閉*
ポップアップが開いたあとに、
ポップアップ内にフォーカスされているか、
移動できるか、
閉じられるか
を確認します。
- *フォーム入力*
入力欄、
チェックボックス、
送信ボタンまで
順番に辿れるかを確認します。

┌──────────────────┐
✓ Check Point
└──────────────────┘
・ Tabキーで順番に移動できる
・選択中の位置が見える
・ボタンやメニューが反応する
・フォーム送信まで操作できる
・開閉メニューが操作できる

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
アクセシビリティ対応に限らず、
Webサイトを公開する前には
必ずキーボード操作を確認する必要があります。

忙しい現場だと、
つい表示やリンクに気を取られ、
ないがしろにされてしまいがちですが、
利用者にとってはとても重要な要素の一つです。

普段から意識して
キーボード操作で
Webサイトを閲覧しておけば、
確認も習慣の中で
無理なく確認できるので、
手間に感じにくくなります。

ちょっとした習慣の工夫で、
いつもより楽に品質を上げることが出来るので
良かったら試してみてください。

✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦
『キーボード操作で確認するアクセシビリティ』の元記事は、Web改善ラボの「アクセシビリティ、どこから始める？ Web担当者向け改善リスト」で、現場の流れに沿って、もう少し詳しく解説しています。
✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

著：永田勝也 (UX/IA Architect) / K2（ケイツー・インタラクティブ）

15/04/2026

UXを、4つの視点で捉える四視点UX設計シリーズ。
最終回は、実務を交えた実践的UX設計です。

鳥の目・魚の目・虫の目という3つの視点を軸に、体験全体をどう捉えるかをまとめました。
K2が実務で使っているオリジナルフレームワークを用いて解説しています。

イベント運営やWeb開発など、20年の実務を通して培ってきた視点を、オンラインとオフラインをつなぐボーダレスコミュニケーションとしてまとめた内容です。
https://www.k2-interactive.co.jp/hpplace/result_ans22.php

10/04/2026

# 最初に決めるのは「判断の軸」

# # 機能選定の軸
機能の話になると、
制作の現場ではすぐに
「どんな技術を使おうか」
「何の機能を入れるか」
という手段の話に偏る傾向があります。

問い合わせ機能、検索、CMS、会員機能、などなど。

これだけでは、
その機能が
目的に寄与するかどうかは
判断できません。

さらに、
判断の基準がないまま
議論を進めると、
立場ごとの意見がぶつかり、
会議のたびに
結論がブレてしまいます。

この議論で最も必要なのは、
目的を達成するために、
何を採用し、
何を見送るのか
という「判断の軸」です。

# # 判断軸の構成要素
判断の軸を構成するうえで、
最低限必要なのは次の3点です。

- 何を実現したいのか
- 誰に、どんな行動をしてほしいのか
- 公開後、誰がどの負荷で回すのか

# # # 何を実現したいのか
例：
- 問い合わせを増やしたい
- 資料請求につなげたい
- 運用負荷を下げたい

# # # 誰に、どんな行動をしてほしいのか
例：
- 検討中のユーザーに、問い合わせまで進んでもらいたい
- 求職者に募集要項を読んでもらい、応募してもらいたい

# # # 公開後、誰がどの負荷で回すのか
例：
- 広報担当が月1回のお知らせ更新を行う
- 複数部署で日常的に情報を更新する

これらを軸にして、
機能採用の可否を判断します。

┌──────────────────┐
✓ Check Point
└──────────────────┘
・機能の選定から始めない
・目的に対して必要かを判断する
・誰に何をしてほしいかを明確にする
・運用まで含めて採否を決める

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
「最近よく見かける演出だから」
「ライブラリは〇〇を使いましょう」など
目的を置いてけぼりにして、
印象先行で機能選定に進む場面に
これまで何度か遭遇しました。

制作現場主導での
クリエイティブに起こりがちですが、
勢い任せな設計は、
嫌な予感しかありません。

一番大事なことは、
目的を達成することです。
そのために必要な機能は何か、
を考えるうえで
判断の軸を作ることは非常に有効です。

✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦
『最初に決めるのは「判断の軸」』の元記事は、Web改善ラボの「要件定義で決める機能要件「やること」「やらないこと」」で、現場の流れに沿って、もう少し詳しく解説しています。
✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

著：永田勝也 (UX/IA Architect) / K2（ケイツー・インタラクティブ）

03/04/2026

# アクセシビリティ対応でも伝わるデザイン

# # 読みにくいページに共通すること
ユーザーにとって
ページの読みやすさは、
レイアウト設計や
文字の置かれ方で
大きく変わります。

例えば
文章ひとつとっても、
文章の区切りが分かりにくいと、
中身を理解するのに苦労します。

文字サイズが小さい、
行間が詰まっている、
文字と背景色が近くて見分けにくい、
1行が長すぎて視線移動が大きい。

こうした状態が重なると、
読み手は内容そのものではなく、
読むこと自体に負荷を感じます。

さらに、
文字サイズを大きくしたときに
レイアウトが変化すると、
デザイン上は「崩れた」と
受け取られることもあります。

しかしながら、
見た目が変わることと、
読めないこと、使えないことは
同じではありません。

アクセシビリティの観点では、
見た目の維持だけを優先すると、
かえって読みやすさや使いやすさを
損なうこともあります。

# # アクセシビリティ対応でのレイアウト設計
読み手が画面を見たときに、
「ここまでが1つのまとまりで、ここから次の話に移る」と
自然に判断できることが、
良いレイアウト設計の基本です。

具体的には、
行間はフォントサイズの1.5倍程度、
段落間は行間の1.5倍程度、
1行の長さは半角80文字、全角40文字程度が
ひとつの目安になります。

また、
文字が背景色に馴染んで
読みにくくならないように、
文字と背景色のコントラストにも
気を付けなければなりません。

WCAGでは、
通常のテキストは
コントラスト比4.5:1以上、
大きな文字は3:1以上が
推奨されています。

そして、
レイアウト設計では
文字サイズを拡大したときの
見え方も重要です。

display:flex などで組んだレイアウトでは、
拡大時に横並びの要素が縦に落ちたり、
折り返し位置が変わったりすることがあります。

ただし、
WCAG 2.1の 1.4.4 Resize text で重視されているのは、
見た目を元のまま保つことではなく、
拡大しても情報が欠けないこと、
操作できなくならないことです。

つまり、
段組みが変わることや、
折り返しが変わること自体は、
直ちに問題ではありません。

アクセシビリティにおけるレイアウト設計では、
デザイン上の「崩れた」という感覚と、
実際に「読めない・使えない」という問題を
切り分けて考える必要があります。

(参考：テキスト表示に関する留意事項:デジタル庁デザインシステムβ版 v2.11.0)

┌──────────────────┐
✓ Check Point
└──────────────────┘
・段落は余白で区切る
・行間/段落は1.5倍
・文字幅は全角40文字程度
・コントラストの確認
・拡大時の見え方を調整

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
アクセシビリティとデザイン、
相反するところで語られることも
現場では多々見かけます。

しかしながら、
情報をきちんと伝えたい、
という根本的な部分に立ちかえると、
共通点が見えてきます。

文字が読みにくい、
環境が変わると読み進められない、
これでは使い勝手の悪いWebサイトです。

意図したとおりに、
どのように情報を伝えていくか？
この共通点を軸に
デザイン制作を進めていくと、
アクセシビリティ対応で
つまづくことも少なくなります。

✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦
『アクセシビリティ対応でも伝わるデザイン』の元記事は、Web改善ラボの「Webアクセシビリティの基礎知識と最低限の実践ポイント」で、現場の流れに沿って、もう少し詳しく解説しています。
✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

著：永田勝也 (UX/IA Architect) / K2（ケイツー・インタラクティブ）

01/04/2026

四視点UX設計の4つ目、「横断UX視点」の記事を公開しました。

横断UX視点は、
戦略UX・構造UX・表現UXを横につなぐ作業視点とは異なり、
俯瞰して全体の状態を観察する視点です。

ユーザー行動に違和感があったとき、
どこに問題があるのか。
層のつながりか、各層の中身か。
それを見極め、各視点に立ち返って設計を見直します。

Webサイトの改善が、部分最適だけで終わってしまう方に向けた記事です。

https://www.k2-interactive.co.jp/hpplace/result_ans21.php
#情報設計

27/03/2026

note公開しました。

非機能要件は、制作の現場では後回しにされやすい項目です。
ただ、放置すると後工程での認識ズレやトラブルにつながる領域でもあります。

今回のnoteでは、
「どこまで対応するか」を事前に共有する重要性に絞って書きました。

表示速度
対応環境
運用負荷
拡張余地

など見積もり前にどこまで前提化するか、
実務的な部分に触れています。

▼note:非機能要件における対応
https://note.com/k2_nagayan/n/nbe877ef4fbb0

#要件定義 #非機能要件 #発注支援

23/03/2026

# 骨子は自分で考えAIと詳細を詰める
# # note 公開しています。
(note)[https://note.com/k2_nagayan]

noteの記事は
AIを使って書いているので、
せっかくなので私のAIの使い方
共有できればと思い
長文書いてみました。

もちろん、もっといいやり方
沢山あると思いますが、
なぜこのやり方で書いているのかも
最後に触れています。

あくまで、私個人のAI利用について触れています。
（ちなみに、この投稿文は全て私が書きました）

*Index*
- 記事の書き方
- ドキュメント（要件定義など）の書き方
- プログラムの書き方

# # 記事の書き方
# # # K2@Webラボ（公式）
K2@Webラボは
K2の公式サイトで連載している
Web担当者のためのお役立ち記事です。
(K2Webラボ)[https://www.k2-interactive.co.jp/hpplace/]

まず、自分がテーマを決めて、
シリーズ化するか、
対象は誰かなど、
基本的な設定を思考します。

それをAIに投げて、
文章の骨子（中見出し）を出してもらう。

出して来た骨子の
意図を確認しつつ、
アップデートする。

骨子が見えてくると、
全体の輪郭が出てくるので、
導入文を自分で考える。

導入を書き終えたら、
最初の中見出しに
フォーカスして、
枝葉になる骨子（小見出し）を考える。

中見出し以下の骨子を
AIに投げて、
小見出しの文章の
叩き台を出させる。

それを自分がリライト
（自分の考え方を入れた自分の文章）した後、
何度かAIとやりとりをして完成させる。

それをひとセンテンス毎に繰り返す。

文章（マークダウン形式）を
一通り完成させたら
AI用に作ったテンプレートを投げて、
HTMLコードを書いてもらう。

HTMLが完成したら
サーバにアップして
画面をキャプチャして
AIに投げる。

読み返して、
意味が通りづらい部分を
図版化させるのに、
AIとディスカッションする。

図版を作ったら
またAIに公開用の
コードを出力してもらう。

もう一度
キャプチャ取って
最後の確認。

文章が長くて
読んでて疲れる辺りに
挿絵を入れるのに
AIとディスカッション。

ある程度印象の候補を出したら
adobe stockで素材探し。

いくつか集めて
来てAIとディスカッション。
（メインビジュアルやOPGも同様）
こうして一つの記事を書き上げます。

▼K2@Web改善ラボ
(K2Webラボ)[https://www.k2-interactive.co.jp/hpplace/]

# # # note
note（今日投稿した文）は、
K2@Webラボ（公式）の記事を
ピックアップして、
その中の中見出しに
フォーカスして、
定型フォーマットに合わせて
文章の叩き台を出して、
各セクションごとに詰めていきます。

こちらは重要度が低いので
1時間程度で終わるよう意識しています。

＊記事を書くポイント＊
- テーマと対象を自分が決める
- AIに骨子を依頼し、自分で調整する
- セクション毎に叩き台をAIに出させて自分でライティングする
- 何度もAIとやりとりして精度を上げる
- 最後にHTML化・図版化する

# # ドキュメント（要件定義など）の書き方
基本的な考え方は
記事と変わらないです。

目的定義などコアな部分は
完全に人間の仕事です。
考えることは全て人間がやります。

その後、
クライアントやチームとの
ディスカッションで集めた情報を、
機密情報などを精査し
代替したのちAIに渡します。

要件の骨子を決めます。

ここも人間（私）が決めます。
骨子をAIに渡した後、
それぞれの骨子の中に
必要な情報（叩き台）を入れてもらいます。

各骨子、
自分自身で考えまとめ
AIに返して
ディスカッションで詰めていきます。

最終的な成形は
プレゼン用は自分の手で、
形式的なドキュメントはAIで
出力させます。

＊ドキュメントを書くポイント＊
- 目的と骨子は自分で決める
- 打ち合わせや調査で集めた情報をAIに渡す
- 各項目の叩き台をAIに出させる
- ドキュメントは用途に応じて成形する

# # プログラムの書き方
要件定義の続きにもなるのですが、
ある程度情報が揃っている状態で、
プログラムの骨子を
最初に考えAIに投げるところから始めます。

文章で言う見出しに相当するのがオブジェクト、
ファイル分割は、ドキュメントのページ分割の思考に似ています。

ここから先の手法は、
基本的に文章を書くときとほとんど変わりません。

＊プログラムを書くポイント＊
- ドキュメントなどから自分で要件をまとめる
- 骨子を先に考える
- AIに実装の叩き台を出させる
- 細かく区切ってAIと詰める
- 全体を確認して仕上げる

# # まとめ
今回3つの対象を紹介した理由は、
考え方と手法が類似しているために
比較がしやすかったからです。
なので、記事の書き方以外の文章が
薄くなってしましました。
（繰り返しになるため）

最近思うのが、
AIを使わずに
素で書きこなす能力がないと、
今日紹介した3つの業務を
こなすのは困難ではないか？
ということです。

経験を積んできた人は
AIを使ってより多くのことを
精度高く成し遂げられる。
一方で、
経験が薄くまだ力をつけていない人は、
決められた範囲の業務を
あまり考えることなく
AIを使ってこなす。
この二極化が
今起こっていると感じています。

あと私のプロンプトの書き方は
あまり上手いものではないのかもしれません。
すごい人はもしかしたら
最初のプロンプトでバンっと
答えを出してしまうのかもしれませんが、
自分の場合は骨子を整えた後に、
細部を何度も意図的に往復させています。

そうすることで
自分のアウトプットである
と言うことを示しているのです。

自分らしさ、AI時代により大切なものになると感じています。

20/03/2026

# インバウンド対応で超重要！文化・地域で異なる印象設計

# # 文化や地域で変わる伝わり方
インバウンド対応というと、
ついつい翻訳や
多言語化をすればいいと
考えてしまいます。

けれど実際には、
伝わるかどうかを左右するのは
言語だけではありません。

色の印象、
写真の見せ方、
言葉の選び方、
表現のトーンなど、
文化や地域によって
受け取り方が変わるのです。

日本人にとって
自然な表現でも、
訪日旅行者には
違和感や誤解に
つながることがあります。

# # 相手に届く形で伝える
インバウンドに対応した
ホームページで大切なのは、
相手が受け取れる形で
情報を届けることです。

文化や宗教、
習慣、距離感の違いに
目を向けると、
必要な配慮が見えてきます。

インバウンド対応では、
翻訳の精度を上げることに加えて、
文化の違いによる、
印象のズレを修正する
設計がとても重要なのです。

┌──────────────────┐
✓ Check Point
└──────────────────┘
- 色は国や文化によって印象が変わる
- 写真やジェスチャーには文化的な配慮が必要
- 言葉は直訳だけでは伝わらないことがある
- 曖昧な表現は混乱を生みやすい
- 伝える内容だけでなく、伝え方の設計も重要

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
インバウンド対応というと、
真っ先に思い浮かべるのが
多言語（もしくは英語）対応です。

実際に、
ほとんどの現場で
多言語対応を真っ先に考えます。

もちろん、
言語に対応することは
大切なのですが、
文化・民族によって、
色やゼスチャーの
受け取り方が違うことがあります。

そのような背景にも目をむけて、
ホームページを設計することで、
伝わる価値のある資産ができあがります。

✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦
『インバウンド対応で超重要！文化・地域で異なる印象設計』の元記事は、Web改善ラボの「訪日旅行者に伝わるインバウンド対応Webサイトとは？」で、現場の流れに沿って、もう少し詳しく解説しています。
✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦═✧═✦

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

著：永田勝也 (UX/IA Architect) / K2（ケイツー・インタラクティブ）

18/03/2026

今回は、表現UX視点における「印象の層」と「意味の層」について書きました。

表現UX視点というと、見た目や雰囲気のことを思い浮かべる方も多いかもしれません。けれど実際には、「やわらかそう」「信頼できそう」といった印象に関わる面もあれば、「何が大事なのか」「どう受け取ればよいのか」といった意図を伝える面もあります。

表現は、見た目の印象だけで終わるものではなく、利用者の理解や納得にも深く関わっています。今回の記事では、そうした違いに加えて、表現によって利用者にどんな変化が生まれるのかについても書きました。

要点がつかみやすくなること。
意図が伝わりやすくなること。
安心して読み進めやすくなること。

表現UX視点は、情報をただ見せるためのものではなく、利用者が納得しながら前に進むための視点でもあると思っています。

▼記事はこちら
意図を伝わる形にする表現UX - 表現UX視点 -
https://www.k2-interactive.co.jp/hpplace/result_ans20.php

株式会社ケイツー・インタラクティブ

24/04/2026

22/04/2026

17/04/2026

15/04/2026

10/04/2026

03/04/2026

01/04/2026

27/03/2026

23/03/2026

20/03/2026

18/03/2026

住所

営業時間

電話番号

ウェブサイト

アラート

ショートカット

共有する

カテゴリー

月曜日	10:00 - 18:00
火曜日	10:00 - 18:00
水曜日	10:00 - 18:00
木曜日	10:00 - 18:00
金曜日	10:00 - 18:00