PhotoGardenM|フォトガーデンM

フォトガーデンMにようこそ~~~

Web制作

Web制作で初めにした事ーHP制作の流れ01

web制作-Wordpressについて

Web制作のフリーランスになって、手始めにHPの制作についてのオフィシャルHPの制作を始めました。
色々方法はあると思うのですが、、、
このHPは趣味のページなので、きちんと改めて「WEB制作用」HPの必要性を感じました。

新規HPの制作は久しぶりなので、ある意味振り返りにもなります。
そして、制作手順や注意点などの覚書をあまり書けていなかったので、
その内容の充実にもなればと作り始めています。

見てもらえるHPを作るためにするべきこと

SEO対策を念頭に置く

HPを作る上で外せないのが、『作っても見てもらわなければ意味がない』ということです。
ユーザー目線に立って作られているか、見たいと思われるコンテンツになっているのか、
自己満足のページでは、趣味のページでは許されても…
いざ!仕事・企業のページでは許されません。

そこで外せないのがGoogleやYahoo!などの検索サイトです。
検索されて1ページ目に表示されているのと、後ろの方のページに表示されているのでは、どうでしょう?

では、どんなHPが1ページ目に表示されるのでしょう?
やはりそこは内容なんです。ユーザーが「知りたい」「見たい」情報がそこにあるのか?ということです。

検索エンジン最適化スターターガイド


その判断の指標を、Googleが「検索エンジン最適化スターターガイド」として一般公開されています。
タイトルの決め方、各ページごとのタイトルの大切さ。などなど…しっかり読んでおいて損はない内容です。

Googleの「検索エンジン最適化スターターガイド」を踏まえて、HPの制作を進めてまいります。

PC向け・スマホ向け両方での表示を用意する必要性。

ご自身の日常でのWEBサイトとのかかわり方を振り返って頂けますでしょうか?
「PCで家に帰ってからサイトを見る。」という方よりも、「気になった時にスマホやタブレットでサイトを見る。」という方のほうが多くありませんか?
まずは、自身もユーザーでもあるわけですから、ユーザー目線に立つところから始めましょう!
そうすると、Mobile用HPの重要性に気付けれたのではないでしょうか。

でも、しかし・・・です。

Webサイトを作る。という時に、パッ!とデザインを思い浮かべるのは、ほとんどの皆さんがPC用のHPデザインを思い浮かべられます。
そして、PCのコンテンツから「これはMobileでも見せておいた方がいいかな」程度で後付けのようにモバイル用HPを作られるのが、従来のWEBページ制作の流れでした。

そして、従来はPC用HPとMobile用HPでアドレスも別に用意してというサイトが多くを占めていました。しかし、最近ではCSSなどでブラウザによって見せ方を設定する「レスポンシブWebデザイン」が多くなってきています。

最新のWEB制作について書かれているサイトや本では、制作の流れ自身が変わってきつつあるように書かれています。
「まず、スマホなどのMobile用HPのデザインを考え、そこからPC用HPのデザインに広がりを持たせる。」というような内容です。

ですので、PC用とスマホなどのMobile用と両方のデザインを考えることを、これからHPを制作る場合には必須と考えておいた方がいいです。
また、既にHPをお持ちで運用されている方も改めてモバイル用ページの制作をお考え頂いた方がいいと考えます。

Webデザインのラフを考える

Web制作 ラフを書く

トップページと仮装ページ(各個別ページ)のレイアウトのラフを書くために・・・

トップページの必要事項を検討。。。

* メインになるビジュアルの位置を決める。
* メニューの位置を決める。
* 「お知らせ」や「各個別ページの見せ方」「ブログ記事一覧」「会社概要」の配置。

次に下層ページのレイアウトを検討。

* PC用HPにおいて、1カラムにするのか、2カラムにするのか、ページによって変更するのか…
スマホなどMobile用HPにおいて、レイアウトを考え全パージ共通部分などの洗い出しをする。

ワイヤーフレームの制作

ワイヤーフレーム

Webページの設計図になるので、細部にいたるまでしっかり落とし込んでいく必要があります。
ワイヤーフレームを作成するには、ツールが必要です。
私は、WEBクリエーターの学校にいる時に教えて頂いた方法で「Photoshop」を使って作成していましたが、より使いやすくネットワーク上での共有が出来るという利点から「Cacoo」を使用するようになりました。

Cacoo

ツールは色々あるようなのですが、日本語のサイトであるという安心感もあり、こちらを使用しています。
プランは無料から有料のものまで3プランあります。

Cacoo プラン

使用制限はあるものの、しばらくはこれで作成していて問題はなさそうです。
クライアントが増えたら、有料にしていこうと思っています。

ワイヤーフレームの作成が終わったら、いよいよHPの制作に進みます。
HPの制作には必要不可欠な、写真などの素材と文書(テキスト)の準備が必要です。

次回には、素材やテキストが揃ってWordPressの作成から書いていこうと思います。

にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ

この記事がいいなと思ったら下のバナーを押して頂けると嬉しいです。
ブログランキング・にほんブログ村へ
にほんブログ村

人気ブログランキングへ

ポチッとして頂いてありがとうございます。(^_^)/
またのお越しをお待ちしています♪

LEAVE A REPLY

*
*
* (公開されません)

最近のBlog

万葉植物園の藤の花
毎年撮影に訪れている万葉植物園。 今年も、GWに入る前にと行ったのですが… 心の晴れないまま撮影に行った写真は、やっぱり心地よいものではなく… ここにアップするのも躊躇されたのですが、そんな写真もまた「私の一枚」なのだと思ってアップすること...
ちゃんと向き合うことの大切さを知る
ずっと悩んでいたこと。。。 『籍を入れずにいること。そのことで孤独に感じていること。』 ダンナさまがどう考えているのか、怖くて聞けなかったこと。。。 先日のことがあって心の病から体調を崩して、前向きになれなくなっていたこと。 心の病の方が勝...
今年初めて咲いたお庭の藤の花
5年前にお庭に植えた藤。 毎年、葉っぱばかりが茂っていっこうに花を付けなかったのに… 今年初めて花を付けました。 本当なら、もっと嬉しいはずなのに… このタイミングで…ということが、かえって寂しさが募ってしまう。 今...
20160723-月下美人の花

ココロとカラダは連動して…体調不良へと繋がる

この投稿はパスワードで保護されているため抜粋文はありません。
20170414-お庭のケマンソウ
やっとお庭にも春色がいっぱいになってきました~ 今年はいつまでも寒かったせいか、どのお花も芽吹くのが遅くって… 特にうちのお庭は、朝日が全く当たらないので芽吹きのスイッチが入りにくいらしいです。 そんなお庭にも、今年もピンクの可...
駅前の桜、満開
今月から1年間通う写真教室の第1回目!! ワクワクドキドキの中、授業を受けて… 今日から一緒に学ぶ初対面の方々との楽しい時間の共有… 年齢層も様々、置かれている状況も様々…面白い!! これから色々な刺激を受けながら過...
More posts。。。

--- おススメサーバー ---