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

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

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

ブログ　2024-02-28 15:00:00

【教養UP】オススメの本

こんにちは、瀬元です！   今回は、オススメの本についてのお話です。   僕自身、本を読むことは好きで 自分自 ...

ブログ　2025-08-15 17:06:00

涼しいとこ行きたくない？

    猛暑と悪天候が続く、今年の夏、、、 みなさまどう お過ごしでしょうか,,, 今年の夏、お休みを頂いたり、 ...

ブログ　2024-05-31 17:16:00

新卒エンジニアが見つけた!迫力満点のマッピングエフェクト

こんにちは、皆さん。2024年新卒の伊藤です。入社して2カ月が経ち、新卒という呼び名も少しずつ薄れてきましたが、まだまだ新人らしい発見があり ...

ブログ　2024-11-28 18:54:00

フロントエンド開発ツール【Vita】

学んだことを忘れないように 備忘録です。     今回はVite（ヴィート）について フロントエンド開発を「速 ...

ブログ　2024-04-09 21:49:00

2回目の入社式と同期たち

こんばんは！ 入社2年目になる、なかむら　りんです！   先日、弊社の入社式に参加しました。 今年は準備して参列する側で、 ...

ブログ　2020-12-28 12:33:00

【速報】劇場版「鬼滅の刃」無限列車編 興行収入歴代1位に

今年、10月16日に公開された「劇場版『鬼滅の刃』無限列車編」ですが、公開日から12月27日までの73日間の観客動員数は2404万人で、興行 ...

ブログ　2024-02-08 21:46:00

Unreal engine 5 for AE ～ueのカメラアニメーションをAEで読み込む方法編～

Unreal engine 5 のカメラのアニメーション情報を AEで読み込む際の手順をご紹介   公式サイトによれば u ...

ブログ　2025-12-15 19:44:00

青春と歩み

  先日、「オオムタアツシの青春」を観ました。大牟田という街を背景に、ひとりの表現者が歩んできた時間が、静かに、でもまっすぐに描 ...

ブログ　2024-05-31 22:19:00

作業よりも調べてる時間の方が長い

こんにちは、手嶋です！ 学生時代のほとんどを絵を描いて過ごしてきた私、 ふと絵を描きたくなったのでその時のお話です。   ...

ブログ　2024-12-23 18:00:00

【C4D】一部分のマテリアル適用【Part.4】

こんにちは、瀬元です！   今回は、Cinema4Dのマテリアル適用についてです。   オブジェクトを作っている ...

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