ホームページ制作
ホームページのコンテンツ内で使えるデザインパーツサンプル

ホームページのコンテンツ内で使えるデザインサンプル

ホームページのコンテンツで使えるデザインパーツサンプルを掲載しております。文章や画像を使ったデザインだけでなく、表やリスト、料金等のデザインサンプルを多数ご用意しております。

また、業種別ホームページでは管理画面からワンクリックでデザインを切り替えることが可能となっております。

文章のみのデザインパーツサンプル

文章のみのデザインパーツは、ホームページで一番使われるといっても過言ではないデザインです。

メニュー紹介や縦書き表記、よくある質問など文章で表す場面は数多くあります。また、背景画像を付け加えるだけでも文章が引き立つデザインとなります。

テキスト横1列デザイン
テキスト横1列デザイン

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

テキスト横2列デザイン
テキスト横2列デザイン

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

テキスト横2列下線ありデザイン
テキスト横2列下線ありデザイン

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

テキスト横1列下線ありデザイン
テキスト横1列下線ありデザイン

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

テキスト横1列背景ベージュデザイン
テキスト横1列背景ベージュデザイン

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

テキスト横1列枠影付きデザイン
テキスト横1列枠影付きデザイン

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

テキスト横1列背景ブルーの下線ありデザイン
テキスト横1列背景ブルーの下線ありデザイン

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

テキスト横2列背景オレンジデザイン
テキスト横2列背景オレンジデザイン

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

テキスト横3列背景半透明デザイン
テキスト横3列背景半透明デザイン

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

縦書きのテキスト3列デザイン
縦書きのテキスト3列デザイン

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

縦書きのテキスト1列デザイン
縦書きのテキスト1列デザイン

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

よくある質問(Q・A黒文字)デザイン
よくある質問(Q・A黒文字)デザイン

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

よくある質問(下線あり)デザイン
よくある質問(下線あり)デザイン

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

よくある質問(Q青文字・A赤文字)デザイン
よくある質問(Q青文字・A赤文字)デザイン

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

よくある質問(Q青丸・A赤丸)デザイン
よくある質問(Q青丸・A赤丸)デザイン

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

よくある質問(Q青枠・A赤枠)デザイン
よくある質問(Q青枠・A赤枠)デザイン

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

よくある質問(Q青ライン・A赤ライン)デザイン
よくある質問(Q青ライン・A赤ライン)デザイン

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

画像のみのデザインパーツサンプル

画像のみのデザインパーツは、文字では伝えきれないイメージを伝えられるデザインです。

バナーや商品など画像で表す場面は数多くあります。

画像横並び1列デザイン
画像横並び1列デザイン

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

画像横並び2列デザイン
画像横並び2列デザイン

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

画像横並び2列(余白あり)デザイン
画像横並び2列(余白あり)デザイン

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

画像横並び3列デザイン
画像横並び3列デザイン

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

画像横並び3列(余白あり)デザイン
画像横並び3列(余白あり)デザイン

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

画像横並び4列デザイン
画像横並び4列デザイン

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

画像横並び4列(余白あり)デザイン
画像横並び4列(余白あり)デザイン

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

左画像1枚右画像2枚デザイン
左画像1枚右画像2枚デザイン

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

左画像1枚右画像4枚デザイン
左画像1枚右画像4枚デザイン

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

文章+画像のデザインパーツサンプル

文章+画像のデザインパーツは、文字と画像で説明を伝えられるデザインです。

イメージを画像で伝え、詳細を文章で伝えることができ、使える場面は数多くあります。

画像上にテキスト(黒透過)デザイン
画像上にテキスト(黒透過)デザイン

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

画像の上にテキスト(黒透過センターライン)デザイン
画像の上にテキスト(黒透過センターライン)デザイン

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

左画像右テキスト横1列デザイン
左画像右テキスト横1列デザイン

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

左テキスト右画像横並びデザイン
左テキスト右画像横並びデザイン

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

画像(左)+テキスト(枠あり)デザイン
画像(左)+テキスト(枠あり)デザイン

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

画像(右)+テキスト(枠あり)デザイン
画像(右)+テキスト(枠あり)デザイン

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

画像上にテキスト(白透過:左寄せ)デザイン
画像上にテキスト(白透過:左寄せ)デザイン

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

丸画像(左)の横にテキスト1列デザイン
丸画像(左)の横にテキスト1列デザイン

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

丸画像(左)の横にテキスト1列(ボーダーライン)デザイン
丸画像(左)の横にテキスト1列(ボーダーライン)デザイン

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

左画像右テキスト横並び(縦書き)デザイン
左画像右テキスト横並び(縦書き)デザイン

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

右画像左テキスト横並び(縦書き)デザイン
右画像左テキスト横並び(縦書き)デザイン

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

画像の下にテキスト横2列(余白なし)
画像の下にテキスト横2列(余白なし)

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

画像の下にテキスト横2列
画像の下にテキスト横2列

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

画像の下にテキスト横3列(余白なし)
画像の下にテキスト横3列(余白なし)

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

画像の下にテキスト横3列
画像の下にテキスト横3列

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

画像の下にテキスト横4列(余白なし)
画像の下にテキスト横4列(余白なし)

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

画像の下にテキスト横4列
画像の下にテキスト横4列

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

画像(左)+テキスト(インフレーム)
画像(左)+テキスト(インフレーム)

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

画像(右)+テキスト(インフレーム)
画像(右)+テキスト(インフレーム)

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

画像の上にテキスト横2列(黒透過:余白なし)
画像の上にテキスト横2列(黒透過:余白なし)

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

画像上にテキスト横2列(黒透過:余白あり)
画像上にテキスト横2列(黒透過:余白あり)

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

画像の上にテキスト横3列(黒透過:余白なし)
画像の上にテキスト横3列(黒透過:余白なし)

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

画像の上にテキスト横3列(黒透過:余白あり)
画像の上にテキスト横3列(黒透過:余白あり)

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

画像の上にテキスト横4列(黒透過:余白なし)
画像の上にテキスト横4列(黒透過:余白なし)

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

画像の上にテキスト横4列(黒透過:余白あり)
画像の上にテキスト横4列(黒透過:余白あり)

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

画像上にテキスト横2列(白透過:余白なし)
画像上にテキスト横2列(白透過:余白なし)

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

画像上にテキスト横2列(白透過:余白あり)
画像上にテキスト横2列(白透過:余白あり)

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

画像上にテキスト横3列(白透過:余白なし)
画像上にテキスト横3列(白透過:余白なし)

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

画像上にテキスト横3列(白透過:余白あり)
画像上にテキスト横3列(白透過:余白あり)

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

画像上にテキスト横4列(白透過:余白なし)
画像上にテキスト横4列(白透過:余白なし)

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

画像上にテキスト横4列(白透過:余白あり)
画像上にテキスト横4列(白透過:余白あり)

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

画像上にテキスト(白透過:左1右2)
画像上にテキスト(白透過:左1右2)

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

画像上にテキスト2列(黒透過センターライン:余白なし)
画像上にテキスト2列(黒透過センターライン:余白なし)

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

画像上にテキスト2列(黒透過センターライン:余白あり)
画像上にテキスト2列(黒透過センターライン:余白あり)

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

画像上にテキスト3列(黒透過センターライン:余白なし)
画像上にテキスト3列(黒透過センターライン:余白なし)

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

画像上にテキスト3列(黒透過センターライン:余白あり)
画像上にテキスト3列(黒透過センターライン:余白あり)

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

画像上にテキスト4列(黒透過センターライン:余白なし)
画像上にテキスト4列(黒透過センターライン:余白なし)

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

画像上にテキスト4列(黒透過センターライン:余白あり)
画像上にテキスト4列(黒透過センターライン:余白あり)

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

画像の下にテキスト横2列(テキスト枠あり:余白なし)
画像の下にテキスト横2列(テキスト枠あり:余白なし)

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

画像の下にテキスト横2列(テキスト枠あり:余白あり)
画像の下にテキスト横2列(テキスト枠あり:余白あり)

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

画像の下にテキスト横2列(テキスト枠あり:余白なし)
画像の下にテキスト横2列(テキスト枠あり:余白なし)

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

画像の下にテキスト横3列(テキスト枠あり:余白あり)
画像の下にテキスト横3列(テキスト枠あり:余白あり)

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

画像の下にテキスト横4列(テキスト枠あり:余白なし)
画像の下にテキスト横4列(テキスト枠あり:余白なし)

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

画像の下にテキスト横4列(テキスト枠あり:余白あり)
画像の下にテキスト横4列(テキスト枠あり:余白あり)

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

丸画像の下にテキスト横2列(枠あり:余白なし)
丸画像の下にテキスト横2列(枠あり:余白なし)

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

丸画像の下にテキスト横2列(枠あり:余白あり)
丸画像の下にテキスト横2列(枠あり:余白あり)

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

丸画像の下にテキスト横3列(枠あり:余白なし)
丸画像の下にテキスト横3列(枠あり:余白なし)

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

丸画像の下にテキスト横3列(枠あり:余白あり)
丸画像の下にテキスト横3列(枠あり:余白あり)

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

丸画像の下にテキスト横4列(枠あり:余白なし)
丸画像の下にテキスト横4列(枠あり:余白なし)

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

丸画像の下にテキスト横4列(枠あり:余白あり)
丸画像の下にテキスト横4列(枠あり:余白あり)

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

画像の下にテキスト横2列(枠あり:余白なし)
画像の下にテキスト横2列(枠あり:余白なし)

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

画像の下にテキスト横2列(枠あり:余白あり)
画像の下にテキスト横2列(枠あり:余白あり)

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

画像の下にテキスト横3列(枠あり:余白なし)
画像の下にテキスト横3列(枠あり:余白なし)

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

画像の下にテキスト横3列(枠あり:余白あり)
画像の下にテキスト横3列(枠あり:余白あり)

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

画像の下にテキスト横4列(枠あり:余白なし)
画像の下にテキスト横4列(枠あり:余白なし)

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

画像の下にテキスト横4列(枠あり:余白あり)
画像の下にテキスト横4列(枠あり:余白あり)

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

丸画像の下にテキスト横2列
丸画像の下にテキスト横2列

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

丸画像の下にテキスト横3列
丸画像の下にテキスト横3列

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

丸画像の下にテキスト横4列
丸画像の下にテキスト横4列

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

丸画像の上にテキスト横2列
丸画像の上にテキスト横2列

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

丸画像の上にテキスト横3列
丸画像の上にテキスト横3列

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

丸画像の上にテキスト横4列
丸画像の上にテキスト横4列

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

丸画像の下にテキスト横4列(自動採番)
丸画像の下にテキスト横4列(自動採番)

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

丸画像の下にテキスト横4列(自動採番:テキスト枠あり:余白あり)
丸画像の下にテキスト横4列(自動採番:テキスト枠あり:余白あり)

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

丸画像の下にテキスト横4列(自動採番:テキスト枠あり:余白なし)
丸画像の下にテキスト横4列(自動採番:テキスト枠あり:余白なし)

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

丸画像の下にテキスト横4列(自動採番:枠あり:余白あり)
丸画像の下にテキスト横4列(自動採番:枠あり:余白あり)

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

丸画像の下にテキスト横4列(自動採番:枠あり:余白なし)
丸画像の下にテキスト横4列(自動採番:枠あり:余白なし)

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

画像の右にテキスト横2列
画像の右にテキスト横2列

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

画像の右にテキスト横3列
画像の右にテキスト横3列

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

画像の右にテキスト横2列(ボーダーライン)
画像の右にテキスト横2列(ボーダーライン)

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

画像の右にテキスト横3列(ボーダーライン)
画像の右にテキスト横3列(ボーダーライン)

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

画像の下にテキスト横2列(タイトル画像上部:余白なし)
画像の下にテキスト横2列(タイトル画像上部:余白なし)

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

画像の下にテキスト横2列(タイトル画像上部:余白あり)
画像の下にテキスト横2列(タイトル画像上部:余白あり)

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

画像の下にテキスト横3列(タイトル画像上部:余白なし)
画像の下にテキスト横3列(タイトル画像上部:余白なし)

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

画像の下にテキスト横3列(タイトル画像上部:余白あり)
画像の下にテキスト横3列(タイトル画像上部:余白あり)

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

画像の下にテキスト横4列(タイトル画像上部:余白なし)
画像の下にテキスト横4列(タイトル画像上部:余白なし)

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

画像の下にテキスト横4列(タイトル画像上部:余白あり)
画像の下にテキスト横4列(タイトル画像上部:余白あり)

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

6:4で画像とテキストを交互に織り交ぜたデザイン
6:4で画像とテキストを交互に織り交ぜたデザイン

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

5:5で画像とテキストを交互に織り交ぜたデザイン
5:5で画像とテキストを交互に織り交ぜたデザイン

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

画像+テキスト交互配置2列
画像+テキスト交互配置2列

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

画像+テキスト交互配置(枠あり)
画像+テキスト交互配置(枠あり)

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

画像+テキスト交互配置(テキスト背景黒)
画像+テキスト交互配置(テキスト背景黒)

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

画像+テキスト交互配置(テキスト背景ピンク)
画像+テキスト交互配置(テキスト背景ピンク)

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

画像+テキスト交互配置(テキスト背景青)
画像+テキスト交互配置(テキスト背景青)

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

画像の下にテキスト横2列(テキスト背景黒:余白なし)
画像の下にテキスト横2列(テキスト背景黒:余白なし)

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

画像の下にテキスト横2列(テキスト背景黒;余白あり)
画像の下にテキスト横2列(テキスト背景黒;余白あり)

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

画像の下にテキスト横3列(テキスト背景黒:余白なし)
画像の下にテキスト横3列(テキスト背景黒:余白なし)

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

画像の下にテキスト横3列(テキスト背景黒:余白あり)
画像の下にテキスト横3列(テキスト背景黒:余白あり)

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

画像の下にテキスト横3列(テキスト背景黒:余白あり)
画像の下にテキスト横4列(テキスト背景黒:余白なし)

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

画像の下にテキスト横4列(テキスト背景黒:余白なし)
画像の下にテキスト横4列(テキスト背景黒:余白なし)

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

画像の下にテキスト横4列(テキスト背景黒:余白あり)
画像の下にテキスト横4列(テキスト背景黒:余白あり)

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

丸画像(左)の横にテキスト2列
丸画像(左)の横にテキスト2列

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

丸画像(左)の横にテキスト3列
丸画像(左)の横にテキスト3列

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

丸画像(右)の横にテキスト2列
丸画像(右)の横にテキスト2列

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

丸画像(右)の横にテキスト3列
丸画像(右)の横にテキスト3列

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

丸画像(小)+テキスト2列(余白なし)
丸画像(小)+テキスト2列(余白なし)

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

丸画像(小)+テキスト2列(余白あり)
丸画像(小)+テキスト2列(余白あり)

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

丸画像(小)+テキスト3列(余白なし)
丸画像(小)+テキスト3列(余白なし)

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

丸画像(小)+テキスト3列(余白あり)
丸画像(小)+テキスト3列(余白あり)

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

丸画像(小)+テキスト4列(余白なし)
丸画像(小)+テキスト4列(余白なし)

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

丸画像(小)+テキスト4列(余白あり)
丸画像(小)+テキスト4列(余白あり)

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

画像(左)+テキスト2列(余白なし)
画像(左)+テキスト2列(余白なし)

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

画像(左)+テキスト2列(余白あり)
画像(左)+テキスト2列(余白あり)

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

画像(左)+テキスト3列(余白なし)
画像(左)+テキスト3列(余白なし)

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

画像(左)+テキスト3列(余白あり)
画像(左)+テキスト3列(余白あり)

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

右画像左テキスト横並び2列(縦書き)
右画像左テキスト横並び2列(縦書き)

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

右画像左テキスト横並び3列(縦書き)
右画像左テキスト横並び3列(縦書き)

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

画像の下にテキスト横2列
画像の下にテキスト横2列

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

画像の下にテキスト横3列
画像の下にテキスト横3列

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

画像の下にテキスト横4列
画像の下にテキスト横4列

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

リストのデザインパーツサンプル

リストのデザインパーツは、箇条書きとして文章を伝えられるデザインです。

リストを使うことで綺麗に文章が整列される為、使える場面は数多くあります。

数字の連番で並べたリスト
数字の連番で並べたリスト

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

数字の連番で並べたリスト(グレーデザイン)
数字の連番で並べたリスト(グレーデザイン)

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

黄緑の文字と枠を使ったリスト
黄緑の文字と枠を使ったリスト

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

黄緑のダイヤで区切ったリスト
黄緑のダイヤで区切ったリスト

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

黄緑の点と下点線を使ったリスト
黄緑の点と下点線を使ったリスト

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

黄緑の矢印で区切ったリスト
黄緑の矢印で区切ったリスト

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

黄緑のチェックマークで区切ったリスト
黄緑のチェックマークで区切ったリスト

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

白い丸と黒背景を使ったリスト
白い丸と黒背景を使ったリスト

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

表(テーブル)のデザインパーツサンプル

表(テーブル)のデザインパーツは、見出しに対する説明を伝えられるデザインです。

会社概要や求人情報などで使われることが多く、項目数が多い場合に有効的です。

スタンダードなテーブルデザイン
スタンダードなテーブルデザイン

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

テーブルデザイン(タイトル背景色:グレー)
テーブルデザイン(タイトル背景色:グレー)

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

テーブルデザイン(センター分け)
テーブルデザイン(センター分け)

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

テーブルデザイン(タイトル背景色:黄緑)
テーブルデザイン(タイトル背景色:黄緑)

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

マップ(地図)のデザインパーツサンプル

マップ(地図)のデザインパーツは、文章と地図を用いて伝えることのできるデザインです。

店舗に来店される際、地図があることによって来店しやすくなります。

左地図右テキスト(タイトル下)
左地図右テキスト(タイトル下)

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

右地図左テキスト(タイトル下)
右地図左テキスト(タイトル下)

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

左地図右テキスト(横長)
左地図右テキスト(横長)

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

右地図左テキスト(横長)
右地図左テキスト(横長)

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

左地図右テキスト(地図大)
左地図右テキスト(地図大)

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

右地図左横テキスト(地図大)
右地図左横テキスト(地図大)

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

料金のデザインパーツサンプル

料金のデザインパーツは、メニュー名と金額を伝えることのできるデザインです。

メニューに補足がある場合、補足分も付け足すことができ、縦書きの料金もご用意しております。

スタンダードな料金デザイン(黒文字)
スタンダードな料金デザイン(黒文字)

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

スタンダードな料金デザイン(赤文字)
スタンダードな料金デザイン(赤文字)

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

料金デザイン(破線)
料金デザイン(破線)

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

料金デザイン(ボーダー:黒文字)
料金デザイン(ボーダー:黒文字)

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

料金デザイン(ボーダー:赤文字)
料金デザイン(ボーダー:赤文字)

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

料金デザイン(上段グレー:黒文字)
料金デザイン(上段グレー:黒文字)

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

料金デザイン(上段グレー:赤文字)
料金デザイン(上段グレー:赤文字)

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

料金デザイン(縦書き:黒文字)
料金デザイン(縦書き:黒文字)

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

料金デザイン(縦書き:赤文字)
料金デザイン(縦書き:赤文字)

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

フォームのデザインパーツサンプル

フォームのデザインパーツは、文字と画像で説明を伝えられるデザインです。

イメージを画像で伝え、詳細を文章で伝えることができ、使える場面は数多くあります。

シンプルフォーム
シンプルフォーム

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

フォーム見出しグレー
フォーム見出しグレー

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

フォーム(枠つき:項目名上)
フォーム(枠つき:項目名上)

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

フォーム(ベージュ背景:テキストスペース白)
フォーム(ベージュ背景:テキストスペース白)

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

予約のデザインパーツサンプル

予約のデザインパーツは、予約フォームで使われるデザインです。

予約ボタンを押すことで日程やスタッフの選択を行うことができます。

画像の下にテキスト4列
画像の下にテキスト4列

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

画像の右にテキスト横2列
画像の右にテキスト横2列

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

商品詳細のデザインパーツサンプル

商品詳細のデザインパーツは、商品の複数画像、料金、項目を表示することができるデザインです。

主に商品詳細ページの上部で使われます。

商品詳細写真1枚(大:左)
商品詳細写真1枚(大:左)

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

商品詳細写真1枚(大:右)
商品詳細写真1枚(大:右)

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

商品詳細写真2枚(大:左)
商品詳細写真2枚(大:左)

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

商品詳細写真2枚(大:右)
商品詳細写真2枚(大:右)

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

商品詳細写真3枚(項目:右)
商品詳細写真3枚(項目:右)

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

商品詳細写真3枚(項目:左)
商品詳細写真3枚(項目:左)

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

商品詳細写真3枚(項目:下)
商品詳細写真3枚(項目:下)

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

スタッフ詳細のデザインパーツサンプル

スタッフ詳細のデザインパーツは、スタッフの写真複数枚とプロフィールを表示することができるデザインです。

項目名は年齢や性別、趣味など任意の設定を行うことができます。

スタッフ写真1枚表示(大:左)
スタッフ写真1枚表示(大:左)

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

スタッフ写真1枚表示(大:右)
スタッフ写真1枚表示(大:右)

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

スタッフ写真3枚表示(スタッフ名:上段)
スタッフ写真3枚表示(スタッフ名:上段)

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

スタッフ写真3枚表示(スタッフ名:中段)
スタッフ写真3枚表示(スタッフ名:中段)

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

テイクアウトのデザインパーツサンプル

テイクアウトのデザインパーツは、居酒屋のホームページで利用されるデザインです。

テイクアウト可能な商品を一覧で並べネット上で予約を取ることができます。

画像の下にテキスト横4列
画像の下にテキスト横4列

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

画像の右にテキスト横2列
画像の右にテキスト横2列

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

出勤時間のデザインパーツサンプル

出勤時間のデザインパーツは、写真、プロフィール、時間を表示することができるデザインです。

様々な業種でご利用することができ、スケジュールの管理にも最適です。

画像の下にテキスト横4列
画像の下にテキスト横4列

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

テキスト2列デザイン
右画像左テキスト(背景ベージュ)

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

ブログ/お知らせ一覧のデザインパーツサンプル

ブログ/お知らせ一覧のデザインパーツは、更新日が表示されるデザインです。

新着情報一覧やブログ一覧で更新日を表示たい場合ご利用することができます。

2列(枠なし)
2列(枠なし)

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

2列(枠あり)
2列(枠あり)

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

3列(枠なし)
3列(枠なし)

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

3列(枠あり)
3列(枠あり)

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

4列(枠なし)
4列(枠なし)

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

4列(枠あり)
4列(枠あり)

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

ブログ/お知らせ詳細のデザインパーツサンプル

ブログ/お知らせ詳細のデザインパーツは、更新日と詳細の文章をひとまとめに表示できるデザインです。

主に新着情報やブログの詳細ページの最上部で使い、ページ内の要約を説明する際に使われます。

画像(左)
画像(左)

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

画像(右)
画像(右)

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

画像(上)
画像(上)

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

ボタンのデザインパーツサンプル

ボタンのデザインパーツは、別のページへ遷移するデザインです。

同一のWebサイト内への画面遷移も可能ですが、外部サイトへの遷移も可能となっております。

角丸ボタン
角丸ボタン

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

ボタンデザイン1
ボタンデザイン1

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

インターネット・ウェブ・デザインの技術で企業をサポート

9BOXは会社に必要不可欠な「集客媒体」と「業務改善」において多くのお客様からご相談やご依頼をいただいております。

新しい技術を取り入れ、インターネット・ウェブ・デザインの様々なサービスを一元管理できる会社として企業をサポートしております。

CONTACT
お電話でのお問い合わせ
0285-36-3931
営業時間 09:00~18:00 月~金
メールでのお問い合わせ