現在、ホームページ（ウェブサイト）を閲覧するユーザーの大半がスマートフォンを利用しています。そのため、スマートフォンでの見やすさや使いやすさが検索順位や実際の問い合わせ数に直結する状況になっています。以前はパソコン用の広い画面を前提としたページ作りが主流でしたが、情報収集の環境は大きく変化しました。 「一応スマートフォンでもうちのホームページは見れるし、そん
ウェブデザイン
最近はChatGPTやGemini、Claudeといった文章生成AIや、デザインまでを自動で組み上げる生成AIが広く普及し、誰でも簡単にホームページ（ウェブサイト）を作れる時代になりました。「数十万円の制作費用をかけずに、話題のAIを使ってサクッと無料で立ち上げてしまおう」とお考えの方も多いかもしれません。 このページは、そうした「AIを使ったホームページ制
無料のAIホームページ制作ツールを使う前に知るべき、売上と採用を左右するマーケティング視点
近年セマンティックHTMLが再評価されています。セマンティックHTMLとは、Webページのコンテンツが持つ「意味」や「役割」を、HTMLのタグを使って正確に伝える記述方法です。見た目を装飾するためではなく「見出し」「段落」「ナビゲーション」などの情報を明確に示し、その情報のその部分が何であるかを明確に定義します。これにより、検索エンジンや音声読み上げソフトな
セマンティックHTML Webページの論理構造の明確化で「意味」を構築
ホームページのCSS・スタイルシート編集方法について触れていきます。ホームページは基本的にHTMLで構成されています。しかしその外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートです。 かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、レイアウトやカラーの設
ホームページのCSS・スタイルシート編集方法
ホームページ修正のしやすさを考えた設計についてお伝えしていきます。主に画像制作のあり方としてホームページの仕組みを理解した上で画像を制作する重要性について触れていきます。 ホームページ制作において重要となる要素のひとつは、変更可能性を想定したホームページ設計であり、後の修正のしやすさを考えた全体設計です。 ホームページのWebデザインを決める場合やWebデザ
ホームページ修正のしやすさを考えた設計と画像制作のあり方
ホームページに設置した画像内の文字の修正についてお伝えしていきます（後半にはAI解析のオブジェクト消去について触れています）。弊社ではホームページ修正サービスを提供しておりますが、「テキスト修正だと思ったら、【画像内に埋め込まれた文字の修正】であったため、費用が想定よりも高く、修正依頼を断念しそうになった」というケースがちらほらあります。 そのような場合は、
ホームページに設置した画像内の文字の修正とAI解析オブジェクト消去
普段あまり触れないデザイン面について書いていきます。弊社にはあまりウェブデザインという概念がありません。ウェブでの動きの面白みを最大限に活かすには、jQueryなどで表現の幅を広げることはできます。しかしながら、ウェブサイトにできる、数ある表現の中で、もっとも情報量が多いのは手書きや自然の形状・色彩です
ウェブデザインにも自然や手書きの要素を
特にECサイト（ネットショップ）の場合、サイト単体でのブランディングはかなり困難を極めます。情報量の少なさによるハンデ ブランディングを端的に捉えた場合、「Aとは…」に続く部分の共通認識をいかに作り上げていくか、ということになると考えています。つまり、ある対象の自己同一性の共通認識を作り上げていくことです
サイト単体でのブランディング 情報量の少なさによるハンデ
ホームページに顔写真や実名掲載は必要であるのかどうかについて触れていきます。ホームページへの顔出しはベターでありマストではありません。顔写真や実名掲載は「信頼を築く」という点に関わることですが、信頼構築の面で考えればホームページ上でできる別の方法もたくさんあります。 ホームページ。それは、あなたの事業がインターネット上に持つ「顔」です。訪れる人にとって最初に
ホームページに顔写真や実名掲載は必要？信頼を築く別の方法
ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「font」（font-family、font-size、font-size-adjust、font-stretch、font-style、font-variant、font-weight）についてのご説明です。 ホームページ（ウェブサイト）を制作する際、ユーザーに情報を伝えるための最も重要な
CSS｜ font（family・size・size-adjust・stretch・style・variant・weight）
ホームページ（ウェブサイト）のデザインにおいて、文章と画像を美しく配置することは、ユーザーの閲覧体験を向上させるために非常に重要です。その中で、画像などの要素を左や右に寄せ、その周囲にテキストを回り込ませるレイアウトを実装する際に活躍するのが、CSSプロパティの「float（フロート）」と「clear（クリア）」です。 近年ではFlexboxやCSS Gri
CSSプロパティ｜ float（フロート）とclear（クリア）
ノーコードホームページ制作の塩漬け化問題 成果に繋がらない90%の人が見落とす『最初の設計図』ということで、「ノーコードでホームページを作れる」ようになった時代だからこそ陥る、新しい落とし穴…ノーコードがもたらした手軽さと、その裏側にある深刻な問題について触れていきます。 WixやSTUDIO、ペライチといったノーコードツールの登場は、私たちに大きな変化をも
ノーコードホームページ制作の塩漬け化問題 成果に繋がらない90%の人が見落とす『最初の設計図』
長期間運営している古いホームページのリニューアルについて触れていきます。 古いホームページのリニューアルの必要性については様々な面から検討していくことが可能ですが、最初に弊社としてはWebデザインが古いからといってそのホームページをリニューアルする必要はないと思っています。 ただ一方で、改ざん等のセキュリティリスクやWebマーケティング効果の低下といった面で
長期間運営している古いホームページのリニューアル
コーポレートサイトとECサイト、ネットショップでは、全体的なウェブデザインやページデザインの特性が異なります。ネットショップの最大の目的は掲載商品を販売することです。優れたデザインによって、ブランディングによる付加価値をつけるという面は極めて少なく、ユーザーに対して「伝える軸」となる面が異なります。
ネットショップにおけるウェブページデザインのポイント
ホームページ制作でどこまでリアリティを表現できるかということを考えることがあります。「ホームページの情報量」ということが話題になる場合、Webにおいては、基本的にテキストや画像の量が情報量になると思います。しかし、情報量が多くても、それが実際のユーザーが感じる情報量の多さとはイコールにはならず、また、情報を複合した「リアリティ」につながるかといえば、単純に検索エンジンのようにはいかないのが実情でしょう。ホームページ制作では、テキストデータが基本になりますが、このメリットは、コンピュータにも解読可能である点です。
ホームページ制作でどこまでリアリティを表現できるか
ホームページの雰囲気を変えるちょっとしたWebデザイン変更についてお伝えしていきます。長年ホームページを運営していると「少し雰囲気を変えたいな」と思ってくるときがあります。ただ、またホームページをリニューアルするとなると大掛かりな予算、そして手間がかかります。 そんな時には、現在のホームページの一部を変更して雰囲気を変える、マイナーチェンジを行うということを
ホームページの雰囲気を変えるちょっとしたWebデザイン変更
ホームページ（ウェブサイト）を構成するHTML文書の中には、ブロック要素とインライン要素という、ホームページを構成する要素の分類があります。これは要素の属性として、スペースをどのように取るかという属性の違いとなります。 このブロック要素とインライン要素にはそれぞれ配置のルールがあり、ウェブページを生成する際には、意図せず文書の論理構造がおかしくなったり、ブラ
ブロック要素とインライン要素
ホームページ（ウェブサイト）制作において、複雑な情報やデータをユーザーに分かりやすく伝えることは非常に重要です。その際に活躍するのが、表（テーブル）を作成するためのHTMLタグである「table」および関連する「tr」「th」「td」「tbody」「thead」「tfoot」タグです。 「table」タグは、表全体の枠組みを定義する大元のタグです。その中に「
htmlタグ｜table（テーブル）・tr・th・td・tbody・thead・tfoot
現在のホームページ（ウェブサイト）制作において、文字の大きさを変えたり、打ち消し線を引いたり、空白を作ったりするためにHTMLタグを直接使用することは推奨されません。インターネットの普及期から2000年代にかけて、「small（文字を小さくする）」「big（文字を大きくする）」「strike（文字に打ち消し線を引く）」「center（センタリング、中央寄せ）
htmlタグ｜small｜ big・strike・spacer・center・marquee・blink（html5で廃止）
サイトのユーザビリティとSEOを無視した場合、ホームページ制作に高額な費用をかけたとしてもほとんどの場合、Webマーケティング効果を期待することはできません。ユーザビリティとは、ホームページを閲覧するユーザーの操作性、使い勝手の良さを意味します。ホームページ制作におけるユーザビリティ向上の重要性と、ユーザビリティとSEOの関係、そしてクローラビリティとの関係を把握した上で、ホームページを設計していくことが大切です。ユーザビリティは、ウェブユーザーのためのもの、そして、クローラビリティは、ウェブサイトの情報を正確に捉えるためにやってくる検索エンジンクローラーを意識したものです。ユーザビリティやSEOを無視した場合、ウェブサイトの価値は一気に落ちます。
サイトのユーザビリティとSEOを無視した場合
ホームページ（ウェブサイト）を制作し、事業の集客や情報発信を成功させるためには、論理的な構造とユーザーにとって使いやすいレイアウトの設計が非常に重要です。全体の骨組みとなるワイヤーフレームを作成する段階から、インデックスページ（トップページ）と各コンテンツページがどのような階層で結びつくかをツリー構造として整理していきます。ページ内部は、ヘッダー（メインメニ
レイアウト・サイト構造 Web制作用語
ホームページ（ウェブサイト）制作において、文章内の特定の文字を斜体（イタリック）にしたり、下線（アンダーライン）を引いたりして強調する場面は頻繁に発生します。インターネットが普及し始めた当初から長らく、これらの視覚的な表現を手軽に実現するための手段として、「i」タグと「u」タグが多用されてきました。当時は、HTMLタグだけで文字の見た目を整えることが一般的で
htmlタグ｜i（イタリック）・u（アンダーライン）
ホームページ（ウェブサイト）の印象を大きく左右する要素の一つが、テキストの文字デザインです。文字の表示方法は、大きく分けて「デバイスフォント」と「Webフォント」の二種類が存在します。 旧来からホームページ（ウェブサイト）制作で用いられてきたのが、明朝体やゴシック体など、ユーザーのパソコンやスマートフォンにあらかじめ内蔵されている標準フォント（デバイスフォン
Webフォントとデバイスフォント Web制作用語
ホームページ制作（ウェブサイト制作）において、難読漢字や専門用語にふりがな（ルビ）を振る機会があります。本記事は、このふりがなを制御するHTMLタグ「ruby」「rt」「rp」「rb」についてのご説明です。年齢層の幅広いユーザーや、特定の業界用語に馴染みのない方々に向けて情報発信する際、読みやすさを確保することは非常に重要です。 テキストの可読性を高めるルビ
htmlタグ｜ruby（ルビ）・rt・rp・rb
手書きのワイヤーフレームについて触れていきます。ワイヤーフレームとは、ホームページ（ウェブサイト）の設計図であり、どの部分に何をどのようにして配置するのかを描いたものになります。今回は、またウェブ制作の思い出話について書いていこうと思います。Web制作・Web関連カテゴリでも良いのですが、雑談程度に書いてみようと思ったため、こちらに投稿します。 私は、ホーム
手書きのワイヤーフレーム
ホームページ（ウェブサイト）でブログ記事や新着情報を公開する際、コンテンツの質と同じくらい重要なのが画像の設定です。記事の冒頭や一覧ページ、あるいはSNS上で情報が共有された際に表示される視覚情報は、ユーザーがそのページを訪問するかどうかを瞬時に判断する大きな基準になります。 一般的に、記事の顔としてページ上部に配置されるメインの画像を「アイキャッチ画像（ヘ
アイキャッチ画像（ヘッダ画像）・OGP・サムネイル画像 Web制作用語
z-index: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「z-index」についてのご説明です。 ホームページ制作・作成において、z-index（zインデックス）は、ボックス（要素）の重なりの順序を指定します。同じ場所に重複して表示される要素の順番を指定することで、重なり部分の中で最前面に表示する要素を指定することができます。
CSSプロパティ｜ z-index [ホームページ制作の装飾プロパティ]
EC-CUBEの「デザイン管理」 レイアウト設定 ページ詳細設定 ブロック設定 ヘッダー/フッター設定 CSS設定 テンプレート設定・追加 レイアウト設定 デザイン管理 レイアウト設定では、TOPページ、商品一覧ページ、商品詳細ページなど、ECサイト（ネットショップ）の各ページのレイアウトをブロックごとにドラッグ、ドロップで編集することができます。 EC-C
EC-CUBE デザイン管理 [ECサイト・ネットショップ]
<style></style> ホームページ制作（ウェブサイト制作）の際に使用する<style>タグについてのご説明です。 ホームページ制作において<style>（スタイル）タグは、ホームページ（ウェブサイト）の装飾部分である「スタイル」を定義する「スタイルシート」を記述する際に使用します。 ホームページ制作に
htmlタグ｜style スタイル
<span></span> ホームページ制作（ウェブサイト制作）の際に使用する<span>タグについてのご説明です。 ホームページ制作において<span>（スパン）タグは、汎用インライン要素として、タグで囲まれた該当箇所をひとかたまりの範囲として定義します。 この<span>タグは、ホームページ制作
htmlタグ｜span インライン要素
width: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「width」についてのご説明です。 ホームページ制作・作成において、width（ウィドゥス）は、対象要素の幅を指定します。 ホームページ制作においては、様々な要素の幅を指定する局面が多いため、widthは使用頻度の高いCSSプロパティのひとつです。 width 幅を指定 w
CSSプロパティ｜ width ウィドゥス [ホームページ制作の装飾プロパティ]
text-shadow: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「text-shadow」についてのご説明です。 ホームページ制作・作成において、text-shadow（テキストシャドウ）は、テキストに影をつけます。 text-shadow テキストに影をつける text-shadowは、ホームページのテキストに影をつけます。
CSSプロパティ｜ text-shadow [ホームページ制作の装飾プロパティ]
text-decoration: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「text-decoration」についてのご説明です。 ホームページ制作・作成において、text-decoration（テキストデコレーション）は、「テキストの装飾」として、テキストの下線・上線・打ち消し線・点滅を指定します。 text-decorati
CSSプロパティ｜ text-decoration テキストデコレーション [ホームページ制作の装飾プロパティ]
text-align: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「text-align」についてのご説明です。 ホームページ制作・作成において、text-align（テキストアライン）は、行揃えの位置・均等割付を指定します。 text-align 行揃えの位置・均等割付を指定 text-alignは、ホームページ内の文章（テキス
CSSプロパティ｜ text-align テキストアライン [ホームページ制作の装飾プロパティ]
table-layout : ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「table-layout」についてのご説明です。 ホームページ制作・作成において、table-layout（テーブルレイアウト）は、ホームページ（ウェブサイト）のページ内に設置する「テーブル（表）」の表示方法を指定します。 table-layout テーブル
CSSプロパティ｜ table-layout テーブルレイアウト [ホームページ制作の装飾プロパティ]
padding: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「padding」についてのご説明です。 ホームページ制作・作成において、padding（パディング）は、「内余白」として枠と内容との間の余白（パディング）を指定します。要素の四辺の内余白をまとめて指定します。 padding 枠と内容との間の余白（パディング）指定（四辺
CSS｜ padding パディング（top・bottom・left・right）
overflow: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「overflow」、「overflow-x」、「overflow-y」についてのご説明です。 ホームページ制作・作成において、overflow（オーバーフロー）は、ページ内の要素から、はみ出た内容の表示方法を指定します。 基本的には要素からはみ出た部分は、要素からはみ
CSSプロパティ｜ overflow オーバーフロー（X・Y）
outline: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「outline」についてのご説明です。 ホームページ制作・作成において、outline（アウトライン）は、「アウトライン」に関するスタイルの簡略指定（スタイル・太さ・色を指定）を行う際に使用します。 outline アウトラインに関するスタイルの簡略指定 （スタイル・太
CSSプロパティ｜ outline アウトライン（color・style・width）
margin: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「margin」についてのご説明です。 ホームページ制作・作成において、margin（マージン）は、ページ内の対象要素の周辺四辺の余白（マージン）をまとめて指定します。padding（パディング）が内余白なのに対して、margin（マージン）は、要素の外側の余白を指定するC
CSS｜ margin マージン（top・bottom・left・right）
list-style: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「list-style」についてのご説明です。 ホームページ制作・作成において、list-style（リストスタイル）は、ページ内に設置する「リスト」に関するスタイルの簡略指定をします。 list-style リストに関するスタイルの簡略指定 ホームページ制作でli
CSSプロパティ｜ list-style リストスタイル（type・image・position）
line-height: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「line-height」についてのご説明です。 ホームページ制作・作成において、line-height（ラインハイト）は、ホームページ内の要素の「行の高さ」を指定します。 line-height 行の高さを指定 line-heightは、ホームページ制作で埋め込
CSSプロパティ｜ line-height ラインハイト [ホームページ制作の装飾プロパティ]
layout-grid: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「layout-grid」についてのご説明です。 ホームページ制作・作成において、layout-grid（レイアウトグリッド）は、グリッドの指定をまとめて行う場合に使用するプロパティです。 layout-grid グリッドの指定をまとめて行う（IE） ホームページ
CSSプロパティ｜ layout-grid [ホームページ制作の装飾プロパティ]
height: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「height」についてのご説明です。 ホームページ制作・作成において、height（ハイト）は、対象要素の高さを指定します。 height 高さを指定 heightは、指定領域（要素）の高さを指定します。なお、要素の幅の指定はwidthで指定します。ハイト。 min-he
CSSプロパティ｜ height ハイト [ホームページ制作の装飾プロパティ]
filter: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「filter」についてのご説明です。 ホームページ制作・作成において、filter（フィルター）の利用で、ページに様々な視覚効果を与える事ができます。 filter 様々な視覚効果を与える（IE） ホームページにCSSのフィルター（filter）を適用することで、対象要素
CSSプロパティ｜ filter フィルター [ホームページ制作の装飾プロパティ]
empty-cells: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「empty-cells」についてのご説明です。 ホームページ制作・作成において、empty-cells（エンプティーセル）は、ページ内の空白セルのボーダーの表示・非表示を指定します。 empty-cells 空白セルのボーダーの表示・非表示を指定 empty-c
CSSプロパティ｜ empty-cells [ホームページ制作の装飾プロパティ]
display: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「display」についてのご説明です。 ホームページ制作・作成において、display（ディスプレイ）は、ホームページ（ウェブサイト）の「要素」の表示形式（ブロック・インラインなど）を指定します。 該当要素の表示/非表示、要素の種類などを指定します。 display 要
CSSプロパティ｜ display ディスプレイ [ホームページ制作の装飾プロパティ]
content: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「content」についてのご説明です。 ホームページ制作・作成において、content（コンテント）は、要素の前後にコンテンツ（内容）を挿入する際に使用します。 content コンテンツ（内容）を挿入 contentは、要素の直前/直後に、文字列や画像などのコンテンツ
CSSプロパティ｜ content コンテント [ホームページ制作の装飾プロパティ]
color: ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「color」についてのご説明です。 ホームページ制作・作成において、color（カラー）は、ホームページ（ウェブサイト）で表示する文字色（前景色）を指定します。 color ホームページの文字色（前景色）を指定 colorは、ホームページ（ウェブサイト）で表示する文字の文字
CSSプロパティ｜ color カラー [ホームページ制作の装飾プロパティ]
border : ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「border」についてのご説明です。 ホームページ制作・作成においてborder（ボーダー）は、ページ内のボーダー（枠）に関するスタイルの簡略指定（スタイル・太さ・色を指定）を行う際に使用します。 border ボーダー（枠）の簡略指定 （スタイル・太さ・色を指定） b
CSS｜ border（style・width・color）border-collapse・border-spacing
background : ; ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「background」についてのご説明です。 ホームページ制作・作成においてbackground（バックグラウンド）は、ホームページ（ウェブサイト）の背景関連の指定をまとめて指定します。 background ホームページの背景関連をまとめて指定 backgro
CSS｜ background（attachment・color・image・position・repeat）
<hr> ホームページ制作（ウェブサイト制作）の際に使用する<hr>タグについてのご説明です。 ホームページ制作において<hr>（ホリゾンタル ルール）タグを使用することで、ホームページ（ウェブサイト）のページ内に水平線を描画することができます。 <hr> 水平線（横罫線） Horizontal Rule（ホリ
htmlタグ｜hr 水平線 [ホームページ制作の基本タグ]
<div></div> ホームページ制作（ウェブサイト制作）の際に使用する<div>タグについてのご説明です。 ホームページ制作において<div>（ディブ）タグは、汎用ブロック要素として、<div>タグで囲んだ範囲を一つのまとまりとして・ひとかたまりとして、定義し、スタイルシートを適用する場合に使用
htmlタグ｜div [ホームページ制作の基本タグ]
