コンテンツで使えるデザインパーツサンプル

一般的に使われるテキスト1列の文章デザイン。シンプルでありながら、背景画像を施せばシックに決まるデザインです。

2つの物を左右に並べることができるテキスト2列の文章デザイン。横並びで2列のテキストを配置することで比較を強調できるデザインです。

見出しに下線を引いたテキスト2列の文章デザイン。複数並べることでメニュー一覧としても使えるデザインです。

見出しに下線を引いたテキスト1列の文章デザイン。2列に比べ1つ1つを読み手に読んでほしい場合に使えるデザインです。

背景をベージュにした文章デザイン。黒の文字がくっきりと強調されており、インパクトを与えるデザインです。

テキスト背景に影付きの枠を付けた文章デザイン。影をつけることによって枠が立体的に見えるデザインです。

清潔感を与える背景ブルーの文章デザイン。タイトル下の下線は濃いブルーで仕切られており、目を引くデザインです。

温かみのある背景オレンジの文章デザイン。パソコンでは横に2列ずつ並び、スマートフォンでは1列で表示されます。

白の半透明の背景を使った横3列のデザイン。背景画像を黒にすることで半透明のデザインが透けてオシャレに見せることができます。

文章を縦書きにしたテキスト3列デザイン。黒をメインとした背景画像と白の文字を使うことによりかっこよさが際立ちます。

縦書き1列のテキストデザイン。薄い色の背景画像と黒文字を使うことによって渋みのあるデザインとなります。

よくある質問ページで使われるQ&Aのデザイン。全て黒文字のシンプルなデザインとなっております。

よくある質問ページで使われる下線ありのQ&Aデザイン。下線を引くことによってQAの区切りがしっかり分かるようになります。

よくある質問ページで使われるQが青文字、Aが赤文字のデザイン。色の違いをだすことにより質問と回答を見やすくデザインしております。

よくある質問ページで使われるQが青丸、Aが赤丸のデザイン。背景色の違いを出すことにより質問と回答を見やすくデザインしております。

よくある質問ページで使われるQが青線、Aが赤線で囲まれたデザイン。色の異なる枠を使うことにより質問と回答を見やすくデザインしております。

よくある質問ページで使われるQが青背景、Aが赤背景のデザイン。質問と回答の背景色が異なる為、質問と回答を見やすくデザインしております。

画像を縦に1枚ずつ並べて表示することができるデザイン。高さは調整できる為、バナーなどでも使えるデザインとなっております。

画像を横並びに2列ずつ配置できるデザイン。画像の間に余白を入れたくない場合使えるデザインです。

画像を横並びに2列ずつ配置できるデザイン。画像の間に余白を入れたい場合使えるデザインです。

画像を横並び3列ずつ配置できるデザイン。画像の枚数が3の倍数の際に使えるデザインです。

画像を横並び3列ずつ配置できるデザイン。画像の枚数が3の倍数で余白があったほうがいい場合に使えるデザインです。

画像を横並び4列ずつ配置できるデザイン。複数の画像を連続で並べたい場合に効果的なデザインです。

画像を横並び4列ずつ配置できるデザイン。余白ありのデザインで、4の倍数または多くの画像を使用する場合に効果的です。

横幅が100%とした場合左50%に画像1枚右50%に画像を2枚配置したデザインです。変則的な配置デザインがお好みの方に最適なデザインです。

横幅が100%とした場合左50%に画像1枚右50%に画像を4枚配置したデザインです。メインとする画像を1枚、サブで使う画像を4枚にしたい場合に使えるデザインです。

画像の上にテキストを配置することができるデザイン。画像には黒の透過を置いている為、落ち着いた雰囲気作りができます。

画像の上にテキストを配置することができるデザイン。黒の透過が画像全体ではなく、文字を囲ったデザインとなります。

左に画像、右に文章を配置するデザイン。閲覧者は左から読んでいく為画像を先に見せてその後文章を読ませる際に効果的です。

左に文章、右に画像を配置するデザイン。スマートフォン表示の場合上から画像→文章の並びで表示されます。

枠線ありの左に画像、右に文章を配置するデザイン。1つ1つのデザインに区切りを付けたい場合枠線が効果的です。

枠線ありの左に文章、右に画像を配置するデザイン。スマートフォンの場合上から画像→文章の並びで表示されます。

画像の上に白透過を文章のみに重ねたデザイン。清潔感のあるオシャレなデザインに効果的です。

左に画像を丸くして表示し、右に文章を配置するデザイン。背景はベージュで区切った作りとなっております。

画像のサイズを一回り小さくした左に画像を丸くし、右に文章を配置するデザイン。縦に並べることができ、ボーダーラインを配置した作りとなっております。

左に画像、右に縦書きの文章を配置するデザイン。横幅をあまりとらず縦に文章を書きたい方にオススメです。

中央に寄せた左に縦書き文章右に画像を配置するデザイン。少し短めの文章で書くとオシャレに決まる作りとなっております。

画像・テキストを横2列ずつ配置できるデザインです。2枚の画像をくっつけて配置できるので比較イメージとしても活用できます。

画像の間にゆとりを持たせたデザインです。1枚1枚の画像が見やすくなるので、各コンテンツ明確にしたいときに使えます。

3列ずつの画像とテキストを配置しています。余白を設けていないので、複数の画像を配置してもコンパクトな印象を感じます。

画像の下に見出しやテキストを配置した3列スタイルのデザインです。画像とテキストをしっかりと強調できます。

画像＋テキストを横4列で構成できます。設備ごとに詳細を解説したり、豊富なサービス内容を写真付きで紹介しやすいです。

画像ごとに余白を設けた横4列のデザイン。使用枚数が多くなっても画像同士が繋がらず、画面がすっきりとします。

横幅の3分の2（左側）を画像、右側3分の1をテキストで構成。画像を先に見せたいときや、画像を大きく表示したいときに便利です。

左側3分の1をテキスト、右側3分の2に画像を配置できます。インテリアや美容関連、娯楽施設など画像をメインで取り入れたい際に最適です。

画像に黒透過を取り入れたデザインです。白文字で上質な印象を与えるので、高級な商品・サービスを取り扱う業種にもマッチします。

横2列で配置した背景画像に余白を設けています。画像に黒透過を重ねて上品な印象に。イメージアップにも繋がります。

横3列ずつ画像を配置できるデザイン。余白がなく、テキストも画像も一目で認識しやすいのが特徴です。

画像を3列ずつ配置したデザインに余白を設けています。各画像・テキストの注目度を高めるので、アピール効果も期待できます。

小さめの画像を横4列で配置できます。飲食店や娯楽施設など取り入れたいコンテンツが多い場合にも対応できます。

横4列配置する画像に余白が生まれたデザインです。小さい画像をたくさん取り入れても、バランス良く見やすい配置になります。

画像に白透過を施し、横2列ずつ配置したデザイン。余白がない分安定感があるので、クリニックやホテルなどさまざまな業種のコンテンツで活用できます。

余白を設けつつ、横2列ずつ画像を配置できます。白透過の画像に黒文字を重ねることで、見やすく分かりやすいコンテンツになります。

白透過の画像に黒文字を重ねたデザイン。3列ずつ配置でき、「サービス内容」「料金」「コンセプト」などのコンテンツに使用可能。

横3列に並べた白透過の画像に余白を設けています。各画像が独立した印象になり、コンテンツを見やすく表示できます。

小さめ画像を横4列に配置したデザインです。白透過により、洗練された雰囲気や清潔感のあるページになります。

余白ありの画像横4列デザインです。各画像に区切りが生まれ、一つひとつの画像やテキストのアピールに繋がります。

白透過を施した画像を計3枚配置。左がメイン写真、右がサブ写真です。黒文字との組み合わせがベストです。

画像のセンターラインに黒透過を取り入れたデザイン。背景画像の高級感を引き立て、クールに決まります。

画像2列スタイルのデザインです。余白により各画像の存在感がアップ。メニューやサービス、トップページのコンテンツ表示に便利です。

黒透過がオシャレな画像3列配置のスタイルです。バーやメンズ向けサロンなどの業種に向いています。

黒透過のセンターラインと画像間の余白が特徴。白文字により背景とのコントラストが強調されます。

画像を4列配置しています。黒透過のセンターラインが4枚の画像に繋がり、全体的に安定したバランスのデザインです。

画像同士に適度な距離を設けているのが特徴。枠のように区切りが生まれ、スマホやタブレットでもコンテンツが見やすくなります。

画像下部にテキスト用の枠を設けています。見出しにサービス内容、テキストに詳細を入れることで一目で閲覧者が内容を把握できます。

2列ずつ並べた各画像の下に、テキストを配置可能。各画像・枠に適度な余白を設けています。

画像を多めに配置したいときに便利なデザイン。画像の枚数を増やしてもまとまりやすいのが魅力です。

余白を設け、画像やテキストを横3列に配置。写真が重要なアパレルやサロン、飲食店などに最適です。

画像とテキストを4列ずつ配置可能。画像ごとに説明書きを入れられるので、簡単に実績を掲載したい業種に最適です。

画像やテキストを4列ずつ配置しつつ、余白が設けられています。画像がより見やすくなるので、ネイルやサロンのサンプル掲載にも便利です。

丸くカットした画像が横2列に並ぶデザインです。可愛らしい円のフォルムが、女性向けサービスにマッチします。

枠が設けられたデザイン。余白がありますが、枠で区切るので背景の色や模様などの影響を受けません。

丸画像を横3列に設けています。枠内に画像とコメントを入れられるので設備や施工、サービス内容の説明に適しています。

各画像・テキストを単体で見やすいよう余白があります。画像やテキストを見やすくしたいときに便利です。

画像サイズが小さめのデザインです。横4列ずつ配置できるので、「サンプルを多めに掲載したい」といったサロン系業種に適しています。

丸画像とコメントのサイズが小さく、ミニマムな印象に。余白があるので、画像枚数を増やしてもスッキリと見やすいのが特徴です。

画像がメインですが、下部に短文のコメントを入れられます。簡単な説明や概要を入れたいときに活用可能。

画像とテキストをまとめた枠を横2列で並べたデザイン。画像が大きめなので、写真で実績を紹介したいときにベストです。

枠付きの画像×テキストデザインです。横3列なので、公開したいコンテンツが多い際にも便利です。

適度な余白を設けた枠ありデザイン。各画像・テキストを区切っているので、異なるジャンルをまとめて表示しても違和感がありません。

横4列で画像とテキストを配置しています。画像メインなので、「写真での施工事例」を掲載したい建設業界のホームぺージにも使えます。

画像とテキストを枠で囲み、余白が設けられています。画像を単体で確認してほしいネイルサロン店や美容室に向いています。

丸いフォルムの画像下部にテキストを配置。人物写真にも適しているので、「スタッフ紹介」「求人における先輩社員の声」などで使用してみてください。

丸画像とテキストを組み合わせた横3列バージョンです。枠やフレームがなく、シンプルな構成が特徴です。

画像の丸みが不安感を緩和するので、「歯科」「病院」「美容クリニック」などのページに最適です。

丸い画像の上部に、短めのテキストを配置しています。説明→画像の順で見てほしいときにピッタリです。

各画像（丸形）の上部にテキストがあるので、事例の説明やサービス詳細などの場面で活用できます。

横4列の画像の上に短いテキストを挿入可能。画像ごとにポイントを解説するなど、さまざまな用途で使えます。

ナンバー入りのデザインです。各画像にNO.1から自動で番号を割り振れます。枠や下線などがなく、シンプルで使いやすいです。

横4列で並ぶ丸画像にナンバーが入るだけでなく、テキスト部分に枠を設けているので、閲覧者がテキストを判別しやすくなります。

余白がなく、全体的にコンパクトなデザインです。サロンやクリニックにおける「工程の説明」などでの使用が便利です。

画像やテキストを枠で区切り、余白を設けています。可愛らしい印象を与えるので、女性向けサロンでの使用が適しています。

横4列の丸画像の下に、テキストを配置。枠で各画像・テキストを区切っているので、見やすいデザインです。

左側に画像、右側にテキストを設けたデザイン。横2列なので画像が小さくならず、写真での実例紹介にも適しています。

左側に画像を設け、右側に見出しやコメントを取り入れています。業務内容を分かりやすく説明したい仕業関連のページに向いています。

画像とテキストを横並びにしたデザインに下線を取り入れた構成が特徴。縦に並べたときに画像やテキストが見やすくなります。

横3列ずつ画像・テキストを挿入できます。工程の説明や、メニュー内容を紹介する際に使用できます。

タイトルと画像上部、テキストを画像下部に配置。見出し→画像→詳細の順に読み進められます。

上部に見出し、二段目に画像、三段目にテキストを配置。各コンテンツごとに適度な余白と統一感があります。

横3列で構成したデザイン。見出しにはナンバーを割り当てたり、メニュー・サービス名を取り入れたりします。

上記の横3列に余白を設けたバージョンです。サロンや仕業、アパレルなど写真＋テキストでの表示が望ましい場合に適しています。

横4列で見出し・画像・テキストを構成。隙間なく画像を配置できるので、業務工程や流れなどの説明にも活用できます。

横4列の画像・テキストを設置。一画面で多くの画像を表示できるので、テイクアウト系メニューの掲載にも便利です。

画像とテキストをオシャレに配置したデザイン。サロンのカットイメージや施設内のイメージ写真に使えます。

画像とテキストがクロスしたようなバランスの良いデザインです。美容系やファッション関連など個性が求められるページに向いています。

画像とテキスト上下で交互になるように配置。リノベーション・リフォーム業界などで、効果的にセンスを演出できます。

画像と枠で囲んだテキストを交互に配置したデザイン。目立つ画像を使用しても、文章の存在感を発揮します。

テキストの背景がブラックのデザインです。繁華街系の飲食店やバーなど、「クールな印象」が重要なページにマッチします。

2点の画像と、ピンク背景のテキストを配置しています。女性向けサロンや美容クリニック、女性がターゲットの教室などのホームページに最適です。

ブルーが特徴のテキストの背景。清潔感があり、医療関連や企業ホームページで印象アップを期待できます。

全体的に落ち着いたトーンが特徴です。ブラックの背景が大人っぽさや上品さを演出しています。

画像やテキストごとに余白を設け、見やすく設計。ブラック背景が洗練されたイメージを与えます。

画像下部に背景黒色のテキストを配置。ブラックの統一感がオシャレなデザインで、メンズ向けサービスにもマッチします。

余白を持たせて等間隔に画像とテキストを配置しています。黒を基調としているので、男性向けブランドやアパレルにピッタリです。

余白を持たせて等間隔に画像とテキストを配置しています。黒を基調としているので、男性向けブランドやアパレルにピッタリです。

横4列で画像とテキストを配置したデザイン。落ち着いたトーンが高級感を抱きます。カッコイイ系のデザインを検討している方向けです。

余白を取り入れたブラック背景のデザイン。敷居の高い飲食店や、高級旅館などのホームページにも馴染みます。

丸いフォルムが特徴の画像を採用しています。画像横には説明書きを入力できるよう、テキスト欄を設置。

丸画像とテキストを横3列に配置。画像が小さくなりすぎないので、スマホでも見やすいデザインです。

テキストを左側、丸画像を右側に配置したデザインです。人物紹介や設備・施設内の説明などに使えます。

横3列タイプの丸画像×テキストのデザイン。画面上に見えるコンテンツを増やしたいときに便利です。

丸画像とテキストをベージュで区切っています。プロフィールにマッチしているので、求人応募における担当者やスタッフの紹介での使用が望ましいです。

画像とテキストを1セットずつ余白で区切ったデザイン。個々を強調できるので、複数人のプロフィールにも適しています。

丸画像とテキストを横3列に並べています。余白がないので統一感のある横並びになります。

余白を取り入れた横3列のデザインです。背景のベージュと黒文字がマッチし、見やすいページに導きます。

複数人のプロフィールを掲載したい場合に便利。1段で4人分をまとめて掲載できるのが魅力です。

ベージュ背景で余白を設けたデザイン。塾や予備校など利用者の声を写真付きで入れたいときにも使えます。

小さめの画像を左側、見出しとテキストを右側に配置。使用機器の説明、サービスの説明などが重要なクリニック、医療関係に適しています。

余白があり、それぞれが独立しているので異なるコンテンツをまとめて公開しても違和感がありません。

テキスト枠が大きめの枠を横3列にしたデザイン。公開情報が多い仕業や整体院、薬局などのページにマッチします。

白背景のテキスト枠が清潔感を与えます。医療機関や歯科医など、白を基調としたページに馴染みます。

画像の割合を大きくした画像×縦書きテキストのデザインです。画像を大きく見せつつ、テキストでも詳しく触れたい場合に使用してください。

テキストと画像を横3列で配置。縦書きスタイルなので、旅館や習字教室などのホームページで日本らしさを強調できます。

画像を横並びにして、それぞれの下部にテキストを入れています。施術前後の比較画像と解説を盛り込めるので、サロンやクリニックに向いています。

画像とテキストを横3列に並べています。クリニックやサロンの「ダウンタイムの経過画像・解説」として取り入れられます。

横4列スタイルで画像・テキストを並べたデザイン。視認性が高く、すっきりとまとまった印象です。

ホームページでは定番のシンプルなデザインです。工程や利用までの流れを簡単に説明する際に使用できます。

グレーの背景色と枠を設けたデザイン。自動採番されたナンバー・リストに余白があるので見やすくなっています。

リストを黄緑で作成。明るさや安心感を与えるデザインなので、医療関係のホームページでも使いやすくなっています。

ダイヤ×見出しのオシャレなデザイン。雑貨品店や美容室、サロンなどのページをハイセンスな雰囲気へと導きます。

点線の下線を設けています。行を分けたいときや、協調したいコンテンツがある際に使用してみてください。

ポップな右向き矢印が目を引くリスト。工程の解説や、要点を強調する際に使用しやすいデザインです。

汎用性の高い「チェックマーク」を使用。箇条書きや要点の解説などで用いることで、分かりやすいレイアウトになります。

黒背景がクールなリストです。ジャズカフェやバー、社交飲食店などのホームページにピッタリです。

白背景のシンプルな表です。タイトルと文章が分かれているので、薬品などの成分情報の記載にも使用できます。

タイトルのみグレーの背景色を使用。サービス名の詳細をまとめるなど、施設や事業に関する内容を掲載する際に便利です。

タイトル側に余白があるので、タイトルを強調したり、長文タイトルを使用できます。サロンやクリニックなど、名前の長い使用機器をタイトルにする際も適しています。

タイトルのインパクトが強いデザイン。タイトルを重視した表設計をしたい方に向いています。とくに、診療科目の多い歯科医、病院に最適です。

視線の動き（左から右へ）に合わせた、地図メインの配置です。地図・タイトル・文章それぞれが独立していて見やすいデザインです。

タイトルや文章が左側のレイアウト。店舗情報を優先させたいお店や、新規客に配慮したページ作りを希望する方向けです。

地図、表ともに横長長方形です。店舗名などを入れるタイトルが上部に表示されます。系列店との勘違いを防ぎやすく、サロンやアパレルにおすすめ。

幅を広くとった表と地図のデザイン。ボリュームの多い文章を入れても読みやすくなっています。

大きく表示される地図を左側に配置。所在地が分かりにくい場所であっても、周辺情報を確認しやすく便利です。

店舗情報が左側のデザイン。地図のサイズが大きいので、新規客もお店の場所を把握しやすくなります。

背景を行ごとにグレーと白で区切っています。料金の読み間違いを防ぎつつ、見やすい黒文字なので、ネットショップにも使用しやすいです。

料金部分を赤文字で強調。割引価格の表示や、クーポン利用後の価格表示など、目を引きたいときに使ってみてください。

見出しと料金のほか、下部に文章を入れられます。注釈やプラン内容の詳細を入れたいサロンや美容クリニックなどに適しています。

料金を大きく表示し、見やすく作成しています。下線下部には料金の内訳やサービスの詳細を入力可能です。

料金を赤く表示しています。お得感をアピールするなど、料金面を強調したいときに適したデザインです。

見出し・料金はグレーの背景、下線下部は白背景です。上段を強調しつつも、下部の詳細も見やすくしています。

料金を赤く表示。料金設定に自信があるアピールになるだけでなく、閲覧者が直感的に予算と照らし合わせやすくなります。

縦書きスタイルの料金デザインです。お品書き感覚で作成できるので、飲食店のメニュー情報にも使用できます。

料金のみを赤文字で強調しています。また、見出し・料金の右側に文章を入れられるので、メニューの詳細をまとめる際にも役立ちます。

入力欄のみに枠を設けたスタンダードなデザイン。どんなデザインのホームページにもマッチしやすく、利用者が操作しやすいのが特徴です。

見出しのみグレーの背景を設けています。見出しと文章を異なる色で明確に分けているので、利用者の入力ミスを防げます。

項目ごとに枠を設けたデザイン。シンプルですが入力場所がわかりやすく、誤って別項目に入力してしまう心配がありません。

ベージュの背景でフォームを強調しています。項目名は枠外ですが、まとまりのある印象を感じるデザインです。

商品やサービスに関する写真の下に、見出しと料金のほか予約ボタンを設置。操作しやすく、ユーザーの利用意欲を高めます。

正方形の画像の横に、見出し・料金・予約ボタンを配置。文字が小さくならず、見やすくなっています。

メインの写真を大きく表示し、サブ写真を下部に小さく4枚表示。画像位置が右側なので、写真を強調したいときに向いています。

商品詳細を左側に配置したデザインです。文章での説明をしっかり読んでほしいときに便利です。

画像を一度に2枚表示できます。右側はタイトルと料金、下部に項目ごとの詳細を入力できます。文章が長文になってもアンバランスになりません。

右側上部にタイトルと料金、テキストを配置しています。画像よりも文章メインで表示したいときに使ってみてください。

画像を3枚並べ、下部にタイトルや料金などを設置。画像も文章も確認しやすく、ネットショップの商品ページに適しています。

上部に商品画像を設置し、左下にテキストがあります。商品の詳細から目を通してほしいときに適したデザインです。

画像・見出し・料金・商品詳細を上から順に配置したバランスの良いデザイン。ストレスなく詳細を確認しやすく、購買意欲の低下を回避します。

左側に人物写真を配置したデザイン。写真の印象が強くなるので、顔写真をアピールしたいときの使用がベストです。

スタッフ写真を右に配置。スタッフの特徴や詳細などを左に配置しているので、プロフィールをアピールしたいときに使用してみてください。

画像を3枚表示できます。スタッフ詳細のほか、サロンのヘアスタイル事例を顔の角度ごとに掲載することもできます。

画像→スタッフ氏名→プロフィールの順で配置。「社員の声」「担当者の紹介」などでの使用に適しています。

画像下に見出しや料金などを設置しています。お弁当や総菜、スイーツなどのテイクアウト予約画面で活用できます。

画像と見出し・料金が隣り合わせになったデザインです。メニュー名も強調したいときに使用してください。

スタッフ画像や名前、出勤時間を横4列に並べています。シフト制など、スタッフの勤務時間が異なる場合でも見やすくなっています。

スタッフごとに画像や氏名、出勤時間の背景をベージュで設定。区切りが設けられているので、一人ひとりの情報を確認しやすいです。

画像と見出しを2列で表示したデザインです。シンプルで見やすく、さまざまなホームページデザインに馴染む設計です。

画像・見出し・投稿時間を枠で囲っています。記事ごとの境目が分かりやすくなり、ユーザーがクリックしやすくなります。

アイキャッチの大きさを保ちつつ、表示枚数を増やしたい方に適したデザイン。3列ずつ表示できるので、比較的記事数が多くても対応できます。

3列構成に枠を設けています。見やすくなるだけでなく、記事のインパクトも強めるので、ユーザーの目にとまりやすいのが魅力です。

記事数が多い場合には、4列構成のデザインがベスト。少ないスクロールでたくさんの見出しを確認できます。

ゴチャゴチャした印象にならないよう、枠を設けたデザイン。1記事ずつ独立したように表示できます。

イメージ画像を左に配置したデザイン。左から右に向かう視線を利用し、画像の印象を強くできます。

左側にテキストを取り入れています。画像を添えつつも、文章メインで構成したいページにピッタリです。

画像がトップになるように設計。画像でページの印象が大きく左右する、ブログ記事の定番デザインです。

丸みを帯びたフォルムが特徴です。柔らかなイメージを与えるので、サロンやクリニック、アパレルなど女性向けサービスのボタンにも適しています。

フォーマルな印象を感じる長方形のボタン。企業のホームページや医療業界のページでも違和感なく使用できます。