ブログ - 2021-03-12 20:41:00

ホームページ制作の極意~その2~

Posted by 横山 夢乃
Yumeno Yokoyama
みなさんこんにちわ。
ゆめちゃんこと横山です?
 
 
 
 
今回も前回に続きまして、
【 ワイヤーフレーム 】の作り方を見ていきましょう！
 
 
 
 
・
・
・
 
 
 
 
サイトマップを作ったら、いよいよワイヤーフレーム制作に取り掛かりましょう！
 
 
 
 
ホームページには、ある程度「TOP」などと呼ばれる、
サイトの顔的なページが存在します。
 
 
 
 
まずはホームページの目的・意図に沿ってページのレイアウトを考えましょう！
 
レイアウトにも種類がいくつかあります。
 
 
 
 
① 1カラムレイアウト
 
 
 
 
“ カラム “とは、「行」のこと。
1カラムは、1列ごとにコンテンツを並べていくスクロール特化型のレイアウトです！
 
 
 
 
メリットとして、画面横幅いっぱいに使うのでインパクトを与えやすく
上から順々に見えていくのでストーリーを作りやすい構造になってます。
その代わり、コンテンツ量が多いと縦になが〜いホームページになって読みづらかったり、
画像や動画がものを言うようなホームページにもなりがちなレイアウトです。
 
 
 
 
② タイル型レイアウト
 
 
 
 
コンテンツ要素をタイルのようにして並べるレイアウトです。
 
 
 
 
たくさんのコンテンツを並べることが出来、
レスポンス対応もしやすいイマドキなレイアウトですが、
タイル状に並べるぶん、1つのコンテンツに出せる情報量が限られてしまったり、
コンテンツに優先順位がつけられないといったデメリットもあります。
 
 
 
 
③ マルチカラムレイアウト
 
 
 
 
１カラムレイアウトとタイル型レイアウトを混合させたレイアウトです。
おそらく企業系ホームページでは一番多いレイアウトなんじゃないでしょうか！
 
 
 
 
情報を整理しやすくて、
優先したいコンテンツやそうでないコンテンツに強弱をつけやすい優れたレイアウトですが、
スマホの時代である今ほとんどの人がスマートフォンでホームページをみています。
そこで重要なレスポンシブ対応がしづらいのがこのマルチカラムレイアウトの弱点なのです。
 
 
 
 
④ サイドバー固定レイアウト
 
 
 
 
サイドバーが固定されており、スクロールしても常にサイドバーがいるような
おしゃれホームページでよく見られるレイアウトです。
 
 
 
 
サイドバーが常にいてくれるおかげで閲覧者が迷い辛いのがこれのいいところですが、
スマホには全く対応ができないのです・・・。
 
 
 
 
・
・
・
 
 
 
 
いかがでしたでしょうか？
 
 
 
 
レイアウトを考えるだけでも一苦労しちゃいそうですよね（笑）
 
 
 
 
コンテンツ量が多ければこっち、内容が重めなのでこっち。
みたいに考えれば良いレイアウトが組めるとおもいます！
 
 
 
 
・
・
・
 
 
 
 
 
次回に続く！
Posted by Yumeno Yokoyama
本社デザイナー/クリエイター/テクニカルディレクター 横山 夢乃

横山 夢乃が書いたその他記事

2024-02-15
かわいい犬
2023-02-22
2020-12-28
仕事納め
2020-12-14
Wacom one 13
2020-11-29
映画鑑賞部
2020-10-30
読書の秋
2020-10-01
海の中道芸人
2020-07-31
ARMY入門
2020-01-31
横山の休日
2019-12-29
FILM CAMERA
< Prev 必ず撮る！変なこだわり
Next > デジタル関連応援事業者に登録しました！
ブログ TOP

ブログ　2021-02-25 19:07:00

最近ハマり出した夜景撮影【長時間露光】

こんにちは、ほーりーです。   某(それがし)、まだまだ駆け出しの動画カメラマンでございますが、 最近「写真楽しいな！」と思 ...

ブログ　2020-12-28 17:11:00

写真で伝えるクリスマスの過ごし方

こんにちは！！   かいとです！！   皆さんクリスマスはいかがお過ごしでしたでしょうか？   皆 ...

ブログ　2021-12-29 19:09:00

ぜひ体験してほしいイヤホン「Beats Flex」【お年玉で買いたいガジェット】

こんにちは、堀裕成です。   もういくつ寝るとお正月でございますね！ お年玉を何に使おうかな？？と考えているそんなあなた！！ ...

ブログ　2021-04-08 22:15:00

標準レンズフレア を3Dに

こんにちは。桑原です。 AEで有料のプラグインを使ってないという人は 標準のレンズフレアの使い勝手の悪さに困惑した人が 多いと思います ...

ブログ　2021-03-31 18:14:00

まさかのHP活用術！！笑

こんにちは関です！ 最近はとても暖かくなって 桜も咲いてすっかり春ですね〜♡ 3月もおつかれさまでした＾＾   3月は少 ...

ブログ　2021-01-22 12:52:00

写真で巡る今年の初詣〜箱崎宮編〜

    皆さんあけましておめでとうございます！     という訳で前回に引き続き初詣シリー ...

ブログ　2024-01-05 17:26:00

[AE]3Dオブジェクトが使えるように!![Update]

こんにちは、桑原です。 12月のAfetr Effectsのアップデートでなんと 3Dモデルが使えるようになりました！ 対応している形 ...

ブログ　2021-04-19 19:11:00

天井にランウェイ!?デジタルショーならではの表現【ANREALAGE 秋冬コレクション】

  こんにちは！たけばです＾＾   最近はコロナ渦の影響もあって、 お客さんがその空間にいって楽しむリアルなショ ...

ブログ　2021-01-31 18:27:00

初心者でもわかる音響ミキサー講座⑥ -COMP(コンプレッサー)編-

みなさん、こんにちは！   前回に引き続き、 第1回目初心者でもわかる音響ミキサー講座① -チャンネル編-で 割愛しまくっ ...

ブログ　2024-03-13 18:03:00

MacとWindowsの壁を越える：外付けハードディスクの読み書き問題を解決する方法

MacとWindowsの両方を使用している自分にとって、 OS間のファイルシステムの違いはとっても不便！！ 特に、Macで使用している外 ...

Copyrights ©️ 2019 All Rights Reserved by PEACSMIND Co.,Ltd.