ひな形。
制作例はこちら
視覚的に選択して、お好みの組み合わせを選びましょう
SMARTSITEでは、お客様の好みに合わせた形でホームページを完成させることが可能です。下記ヘッダー・ナビゲーション・コンテンツ・フッターエリアからお好きなデザインを選んで、それぞれを組み合わせてホームページを作成いたします。それぞれの特徴と詳しい内容をお選びいただき、パズル感覚でお好みのスマートフォンサイトを作りましょう。
ひな形はすべてデザイン会社であるPNRAが豊富な制作実績からユーザーインターフェイスに優れたと判断したものを厳選してご用意しております。
ヘッダーエリア
Header Area
ナビゲーションエリア
Navigation Area
コンテンツエリア
Contents Area
フッターエリア
Footer Area
ヘッダーエリア
Cleanness
サイトデザインに同化させることで、ヘッダーエリアをデザインの一部に組み込む透過手法。近年増えてきているレイアウト手法です。
採用サイト
SMARTSITE（公式ホームページへ）
coming soon
coming soon
"Cleanness"を実際にみてみる
Default
標準的なスマートフォンサイトのヘッダーレイアウト。最もポピュラーな並びのため、ユーザーの視覚的理解は得やすい。
採用サイト
初心者のための富士山登山ガイド（公式ホームページへ）
coming soon
coming soon
"Default"を実際にみてみる
Menu Focus
ナビゲーションへの誘導を分かりやすくしたヘッダーレイアウト。サイト内を頻繁に回遊する場合に有効。
採用サイト
coming soon
coming soon
coming soon
"Menu Focus"を実際にみてみる
Shopping
本サイト以外に誘導したい項目がある場合（ここではOnline shopとMail Magazine）に最適なヘッダーレイアウト。
採用サイト
coming soon
coming soon
coming soon
"Shopping"を実際にみてみる
ナビゲーションエリア
Side-Slide(Right) Menu
メニューボタンをクリック、或いはタッチパネルでスワイプすると出現するメニューエリア。画面の小さなスマートフォンでも、メニュー項目が見易く、項目数が多いものにも対応可能。
採用サイト
SMARTSITE（公式ホームページへ）
初心者のための富士山登山ガイド（公式ホームページへ）
coming soon
"Side-Slide(Right) Menu"を実際にみてみる
Side-Slide(Left) Menu
メニューボタンをクリック、或いはタッチパネルでスワイプすると出現するメニューエリア。画面の小さなスマートフォンでも、メニュー項目が見易く、項目数が多いものにも対応可能。
採用サイト
coming soon
coming soon
coming soon
"Side-Slide(Left) Menu"を実際にみてみる
Top-Slide Menu
メニューボタンをクリックすると上部から出現するメニューエリア。左記では４列配置になっているが、列数は自由に変更可能。メニューボタンの項目数が少ない場合は一つ一つのボタンを大きく取れるので非常に見やすいメニューになる。
採用サイト
PNRA（公式ホームページへ）
coming soon
coming soon
"Top-Slide Menu"を実際にみてみる
Slide-Down Menu
メニューボタンをクリックするとヘッダーエリアから出現するメニューエリア。左記では２列配置になっているが、列数は自由に変更可能。ファーストビューエリアでサイト内を一望できるところに利点があり、ユーザーがホームページ全体を行き来しやすく設計してある。
採用サイト
coming soon
coming soon
coming soon
"Slide-Down Menu"を実際にみてみる
コンテンツエリア
1-column-rayout (Full width)
スマートフォンサイトで最も標準的な１カラムレイアウト。ビジュアルイメージを画面いっぱいに使用。
1-column-rayout (inBox width)
スマートフォンサイトで最も標準的な１カラムレイアウト。ビジュアルイメージをコンテンツカラムに合わせて使用。
2-column-rayout (Full width)
写真を並べる際に最適な２カラムレイアウト。テキストも挿入可能です。
3-column-rayout (Full width)
写真点数が多い場合に使える３カラムレイアウト。テキストも挿入可能です。
フッターエリア
Social plus
シンプルなフッターエリアに、ソーシャルメディアへのリンクを繋げた形のフッターエリア。各種ソーシャルメディアとの連携を行っているお客様はこちらをご利用ください。
採用サイト
coming soon
coming soon
coming soon
"Social plus"を実際にみてみる
Scroll Top
シンプルなフッターエリアに、トップへ戻るボタンを追加したフッターエリア。ページ階層が深い場合や、トップをホームページの起点として多様するホームページ内容のお客様はこちらをご利用ください。
採用サイト
SMARTSITE（公式ホームページへ）
初心者のための富士山登山ガイド（公式ホームページへ）
coming soon
"Scroll Top"を実際にみてみる
デザインパターンは随時更新
SMARTSITEでは、日々進化し続けるウェブデザインの動向に目を光らせ随時新しいデザインパターンを追加していきます。スマートフォンのブラウザでは、最新技術であるHTML5+CSS3という、いま現在進行形で加速度的に進化している技術が実装可能です。それらの技術を駆使し、より快適で、よりユーザビリティの高いデザインを追求し続けます。