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