ブログ - 2021-03-05 20:03:00

ホームページ制作の極意

Posted by 横山 夢乃
Yumeno Yokoyama
こんちわ、ゆめちゃんこと横山です。
 
 
 
 
【 ワイヤーフレーム 】
 
 
 
 
って聞いた事ありますか？
 
 
 
 
ワイヤーフレームとは、弊社サービスの一環でもある「ホームページ制作」の際に重要な資料の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-07-31 21:24:00

GH5ユーザー必見！壊れた撮影データ.mdtファイルを修復する方法！

GH5ユーザの皆さん、こんな経験はございますでしょうか？   ----カメラの録画中にバッテリーが落ち、 SDカードのデータ ...

ブログ　2021-03-01 18:49:00

『HTML超入門』Progateで気軽にレッスン

こんにちは、ほーりーです。   HTMLに触れてみよう！ とのこと以前のブログで「ドットインストール」についてのお話をしまし ...

ブログ　2021-01-30 21:15:00

【初心者向け】写真撮影のコツ教えます！第9弾「三分割構図」

写真撮影〜構図編〜 ・第1弾「日の丸構図」 ・第2弾「放射線構図」 ・第3弾「対角線構図」 ・第4弾「シンメトリー(2分割)構図」 ...

ブログ　2022-01-23 19:03:00

今年の一字が決定した！！

    新年明けましておめでとうございます！   ひきちです   突然ではありますが、新 ...

ブログ　2019-08-11 22:19:00

東京ディズニーランド2019夏のショーを満喫！

ご無沙汰してます、松崎です。 少し前の出来事になりますが、7月16~18日に三連休を取ってディズニーリゾートへ行ってきました！ 20 ...

ブログ　2021-01-22 21:34:00

除菌、殺菌、滅菌、抗菌って何が違うの？？

みなさんこんにちわ！！ ツルです！！   現在、コロナ禍で感染予防として手洗いうがいやアルコール消毒が有効だと言われています ...

ブログ　2023-05-25 22:55:00

【幻想的】ザ・ベイスイート桜島テラス初ランタンバルーン演出を得て

  みなさんこんにちは！井手口です★   先日ザ・ベイスイート桜島テラスでは初の「ランタンバルーン演出」がありまし ...

ブログ　2020-08-31 21:19:00

シークレット花火

  みなさん、今年の夏は楽しめましたか？   イベントがなくなり、お出かけの機会も減ってしまいましたね&helli ...

ブログ　2023-11-29 12:09:00

【後編】東京研修の巻

どうも皆さんこんにちは！ 志水 勇輔(しみず ゆうすけ)です     今回のブログは東京研修の後編やっていきます ...

ブログ　2021-07-07 14:37:00

【Photoshop】ニューラルフィルターがすごい!

こんにちは、桑原です。 Photoshop2021がリリースされてもうすぐ 1年になろうとしてますが、新機能として追加されて ややこし ...

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