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

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

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

初心者でもわかる音響ミキサー講座 番外編 -色んなエフェクトかけてみた-

みなさんこんにちは！ 前回はエフェクトのかけ方について解説していきました！   今回は番外編。代表的なエフェクトのひとつ"リ ...

ブログ　2021-12-23 11:46:00

ドローンが登録制に！？

こんにちは！ 深田雄太です！   いよいよドローンの登録制度が始まります。 操縦者の免許ではなくドローン機体を 登録して ...

ブログ　2025-10-31 21:41:00

【くまモン】くまモンポート八代に行ってきた

こんばんは 先日八代市にあるくまモンポート八代に行ってきました！ でっかいクルーズ船の受け入れができる場所らしいですがよくわかりません！ ...

ブログ　2021-01-07 14:05:00

YouTube編集を早く簡単にこなすために必要なたった12のこと

こんにちは、ひなのです   今日は、YouTube編集を   いかに早く楽にできるか！ かつ、いかに面白くでき ...

ブログ　2024-06-14 22:21:00

【プロジェクションマッピング×介護業界】老人ホームでのプロジェクションマッピング！？

どうも銀次です。 今回は私がプロジェクションマッピングを使うことで、この業界でこんな事できると思うけどどうですか〜？ というのをひたすら ...

ブログ　2026-10-04 20:54:00

19歳　社会人の第一歩。

こんにちは！中村隆之介です。 先日、内定式に参加させていただきました。 不安がいっぱいでドキドキしながら内定式を迎えました。 社会人に ...

ブログ　2024-01-28 12:24:00

東京研修レポート2　蜷川実花展へ

  こんにちは！たけばです！   前のブログに引き続き、、、 東京研修パート2について書いていきます！ &nb ...

ブログ　2023-03-24 19:57:00

インパクト大！挙式での迫力演出！

  みなさんこんにちは！ 今回は先日の挙式で盛り上がったシーンのご紹介をします。 皆さんは挙式といったらどういうイメージをさ ...

ブログ　2021-02-04 21:03:00

バレンタインデーちょっと変わったチョコレート

もうすぐバレンタインデーですね＾＾   何を買おうか迷っている方、 普通のチョコじゃなくて、 ちょっと個性的なチョコレート ...

ブログ　2021-01-18 17:52:00

振袖を撮りに行ってきました！

こんにちは！ 最近はもっぱら撮影に夢中のホーリーです。   年明け、鹿児島に初出勤してくれた時期新卒のゆうきゃんが こんな ...

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