Webサイトの評価・添削お願い致します
※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。
posted by ばーなるさん 2015-02-16
こんにちは、ばーなると申します。
以前、「Gasthaus Goldener Lachs」というホテルのサイトの添削をして頂きました。その節はありがとうございました。
デザイン部分に力を入れたほうが良いとのアドバイスを頂き、
今回、ワイナリーのサイト「Weingut Riedmaier」を作ってみました。
（馬場注：現在は公開終了されています）
今回は少しデザイン部分を改善してみました。
レスポンシブデザインを試みたのですが、特にトップページに関してはイラストレーターでコルクボードとメニューを一体化させてしまった為、
ウィンドウ幅に合わせて画像サイズを変化させることができませんでした。
（当初はそれぞれの位置にメニューを配置するのが大変だろうと思い、それを軽減させる為に思いついたものでした）
リキッドレイアウトできる部分だけを％で書いてみました。
ドイツ語でまた申し訳ございませんが評価をお願いできますでしょうか？
今回作ってみて難しい点や質問が何点かございます。
１．イラストレーターの画像をpngで保存した場合、cssでwidthなどで％表示に大きさを変えられるのでしょうか？
２．各ページ、背景の画像の上に写真を横幅いっぱいに広げてみたのですが、
リキッドレイアウトで％にしても上手く表示されませんでした。（背景の上に写真を重ねてしまった為？）
横幅いっぱいに表示する為に、写真のサイズ1920px×960pxを用意してみました。
どのデバイスを使うかによって画面いっぱいに表示するのに必要な写真の大きさが違ってくるかと思いますが、どのような大きさの写真や画像を用意したら良いのか良く分かりません。
３．今回も主人にクライアントになってもらい、デザインは私のアイディアで作ってみたのですが、
ワイヤーフレームをざっと作り（手書きでも良いのでしょうか？）、htmlやcssでコーディングしている段階で、こうしたらいいんじゃないかという新しい案が出てきた場合、
もう一度ワイヤーフレームを書き直したほうがよろしいでしょうか？
今回、書き直さないまま作ってしまいました。その上、最初の段階でレスポンシブデザインまで想定せず、トップページのようにコルクボードにメニューを一体化させてしまい、失敗したなと思っています。
デザインばかり考えすぎたのかもしれません。
４．サイトを作る際、モバイルファーストがいいのでしょうか？それともPCから作った方がいいのでしょうか？
５．私のようにまだ勉強中の場合、分かりやすいカラムのレイアウトを沢山作ったほうが作りやすいのでしょうか？
今のところ、決まったカラムというより、フリースタイルになっているように思います。ですので、レスポンシブデザインをする際、画像が色んなところの飛んでいってしまい、レイアウトが難しく感じるように思います。
６．沢山のサイトを作りたいと思ってはいるのですが、サイトに必要なサンプル画像や内容（文章など）を考えたり集めたりするのにすごく時間がかかってしまいます。練習段階や将来、サンプルページ等を作ることがある場合、今回の様に完璧に材料を集める必要はあるのでしょうか？
難しい質問ばかりで申し訳ございません。
お忙しいところ申し訳ございませんが、どうぞ宜しくお願い致します。
以前、「Gasthaus Goldener Lachs」というホテルのサイトの添削をして頂きました。その節はありがとうございました。
デザイン部分に力を入れたほうが良いとのアドバイスを頂き、
今回、ワイナリーのサイト「Weingut Riedmaier」を作ってみました。
（馬場注：現在は公開終了されています）
今回は少しデザイン部分を改善してみました。
レスポンシブデザインを試みたのですが、特にトップページに関してはイラストレーターでコルクボードとメニューを一体化させてしまった為、
ウィンドウ幅に合わせて画像サイズを変化させることができませんでした。
（当初はそれぞれの位置にメニューを配置するのが大変だろうと思い、それを軽減させる為に思いついたものでした）
リキッドレイアウトできる部分だけを％で書いてみました。
ドイツ語でまた申し訳ございませんが評価をお願いできますでしょうか？
今回作ってみて難しい点や質問が何点かございます。
１．イラストレーターの画像をpngで保存した場合、cssでwidthなどで％表示に大きさを変えられるのでしょうか？
２．各ページ、背景の画像の上に写真を横幅いっぱいに広げてみたのですが、
リキッドレイアウトで％にしても上手く表示されませんでした。（背景の上に写真を重ねてしまった為？）
横幅いっぱいに表示する為に、写真のサイズ1920px×960pxを用意してみました。
どのデバイスを使うかによって画面いっぱいに表示するのに必要な写真の大きさが違ってくるかと思いますが、どのような大きさの写真や画像を用意したら良いのか良く分かりません。
３．今回も主人にクライアントになってもらい、デザインは私のアイディアで作ってみたのですが、
ワイヤーフレームをざっと作り（手書きでも良いのでしょうか？）、htmlやcssでコーディングしている段階で、こうしたらいいんじゃないかという新しい案が出てきた場合、
もう一度ワイヤーフレームを書き直したほうがよろしいでしょうか？
今回、書き直さないまま作ってしまいました。その上、最初の段階でレスポンシブデザインまで想定せず、トップページのようにコルクボードにメニューを一体化させてしまい、失敗したなと思っています。
デザインばかり考えすぎたのかもしれません。
４．サイトを作る際、モバイルファーストがいいのでしょうか？それともPCから作った方がいいのでしょうか？
５．私のようにまだ勉強中の場合、分かりやすいカラムのレイアウトを沢山作ったほうが作りやすいのでしょうか？
今のところ、決まったカラムというより、フリースタイルになっているように思います。ですので、レスポンシブデザインをする際、画像が色んなところの飛んでいってしまい、レイアウトが難しく感じるように思います。
６．沢山のサイトを作りたいと思ってはいるのですが、サイトに必要なサンプル画像や内容（文章など）を考えたり集めたりするのにすごく時間がかかってしまいます。練習段階や将来、サンプルページ等を作ることがある場合、今回の様に完璧に材料を集める必要はあるのでしょうか？
難しい質問ばかりで申し訳ございません。
お忙しいところ申し訳ございませんが、どうぞ宜しくお願い致します。
ばーなるさん
こんにちは。独学!未経験からWebデザイナーになる!!
http://www.be-webdesigner.com/
の管理人の馬場です。
大変お待たせしました。
先日のお悩み相談についてご返信しますね！
Illustratorで作った画像に限りませんが、
通常のimgタグでの画像はwidthやheightで%表示ができます。
文脈からすると、ここでおっしゃっているのは、
おそらくはコルクボードの部分のような、
backgroundで指定した背景画像のことでしょうか。
ちなみに背景画像も、
background-size: ○% ○%;
にて、％で大きさを変えることができます。
トップ以外は画像が、width="1920" height="960"で置かれていますが、
％指定にすれば論理的には広がるはずです。
少なくとも、トップは100%指定できちんと広がっていますから、
同じようにすればいけると思います。
（できない場合は、その問題を１つずつ切り分けてみられると良いでしょう）
どのくらいの大きさにすれば良いかは、
どんなターゲットユーザーを想定しているかや、
またはどのくらいきれいに見せたいかによって検討します。
完全なPCサイト（スマホサイトは別）であれば、
PCでウィンドウサイズを広げたり狭めたりしながら確認し、
ほどほどにきれいであればそれで良いと思います。
スマホの場合、今の高解像度端末（iPhoneのRetina等）は
表示サイズの２倍のサイズが良いともいいますが、
まずは実機でテストしながら試してみて、
肌感覚で画像の大きさを掴んだ方が良いように思います。
後述しますが、見た目をきれいにするあまり、
容量が大きくなりがちなことには注意が必要です。
そのためデバイスによって異なる解像度の画像を
読み込ませる方法もあります。
本当のお仕事での制作と、
プライベートな制作とで違いがあるように思います。
お仕事ですと、ワイヤーフレームを
クライアントに承認いただいた後は、
作る段階ですでに熟考しているため、基本的には後戻りはあまりしません。
（アイデアを進言して、承認を得られればその限りではありませんが、
後戻りするとコストが増えてしまうのも理由です）
プライベートな制作、しかも学習途中ですから、
次回に活かせればどちらでも良いように思います。
ただ、書き直しもしやすいですし、
手書きよりも、デジタルデータがお勧めです。
そのような概念もありますが、案件次第だと思います。
ターゲットユーザーがどのような層なのか、
PCで見てもらいたいのか、スマホなのか等によって変わります。
また、そもそも１つのページでスマホなどの様々なデバイスを対応させるのか、
デバイスに応じて違うHTML/CSSを返すのか、
デバイスに対応した専用ページへ飛ばすのか等、
案件により変わってきます。
コストも変わってきますし、
状況により最適な選択が変わりますので、
それらは、クライアントと相談して決定します。
一般的なサイトでよく見る形式のサイトが、
練習には良いように思います。
（横１列のグローバルナビゲーションがあり、
サイドメニューもある２カラム構成のサイトなど）
レスポンシブWebデザインも、最初からできなくても、
基本が上達してきてからやっても遅くはないと思います。
それよりも、作るサイトのタイプが少し気になります。
今回のような架空のサイトを作ることで得られる事もあるのですが、
できればご自身の趣味のサイトなど、
生きたサイトをたくさん作られることをお勧めします。
サイトの制作・運営・更新をして、
初めてわかることが非常にたくさんあります。
例えば、
・ある部分のデザインを変えたら、○%クリック率がアップした。
・文章を追加したら、意外なキーワードで検索の上位にでてアクセスが増えた。
・ある施策を行ったらメールをもらえる数が○%増えた。
等ということは、架空のサイトを作るだけでは絶対に身につきません。
特に、将来フリーランスを目指されていらっしゃるとのことですので、
生きたサイトをたくさん制作＆運営した経験が、
クライアントへのアドバイスに活きてくるでしょう。
クライアントの要望からイメージ画像を自分で選ぶこともありますから、
全くの無駄では無いとは思います。
……ですが、素材は全て用意されている案件も多いですし、
文章にいたってはほぼ全ての案件で、
クライアントが用意してくれます。
したがって個人的には、ちょっと時間がもったいない気もしますね。
特に、架空のサイトではなおさらです。
繰り返しになりますが、
まずはご自身をクライアントとし、
趣味のサイトを作られることをお勧めします。
そうすれば、素材集めも楽しいですし、
サイトは自分の資産になりますから、無駄になることもありませんので。
■その他
▽デザイン
％にできれば解決すると思いますが、
各ページのメイン画像が大きすぎるので、
こちらを小さくすればだいぶ見栄えが良くなると思います。
ただ、メイン画像はぽんと置いてあるだけなので、
（それはそれで良いこともあるのですが）現状は
少し写真に頼りすぎかな、とも思います。
例えばキャッチコピーを載せてみたり、
何か加工できないか考えてみてもよいかもしれません。
実際は、素材が少ない中で
デザインしなければならないことも多いので、
そうやって考えることは、実際の仕事で役立ちます。
あとは、デザインは年単位で努力しないと
うまくならないので、引き続きサイト制作で
鍛えられると良いと思います。
こればっかりはデザインの原理原則を書籍などで学んだ上で、
作りまくるしかありません。
▽縦横比
「Wanderung」部分の画像が、
縦横比が少しおかしい（縦に伸びている）ように思います。
基本的に、写真画像の縦横比を変えると、
一気にプロっぽさを失ってしまうので、
変えないようにお使いになると良いでしょう。
▽コーディング
ざっくりと見たところ、
明らかに気になるところはありませんでした。
文法チェッカーにかけて、
エラーがでないレベルになれれば大丈夫です。
【文法チェッカーで正しい(X)HTML/CSSを書こう】
http://www.be-webdesigner.com/tips/coding/syntax_checker.htm
先ほどもふれましたが、今度はより一般的な、
２カラムのデザイン・コーディングにも
チャレンジされると良いと思います。
▽容量について
現在トップページが4.1MBの容量があります。
これだけあると、特にスマホユーザーにとっては
通信料が増えて大変ですので、
容量を気にかけて作られると良いでしょう。
※例えばFirefoxであれば、Firebugというアドオンが便利、
Chromeでも、デベロッパーツールで容量が見られます。
詳しくは検索してみてください。
最後になりますが、実は評価する際には、
できるだけ仕様もお聞かせいただけると、
より違ったアドバイスが出来ます。
特に、
・どんな人に向けて作ったサイトで、
・そのサイトの目的（ゴール）はなんなのか、
は大事です。
しかしながら、ドイツ語が読めないので、
それらがわかってもアドバイスが難しいのが正直なところですm(__)m
そのため無難なアドバイスになってしまったかもしれませんが、
少しでも参考になるところがあれば幸いです。
馬場誠
こんにちは。独学!未経験からWebデザイナーになる!!
http://www.be-webdesigner.com/
の管理人の馬場です。
大変お待たせしました。
先日のお悩み相談についてご返信しますね！
> １．イラストレーターの画像をpngで保存した場合、cssでwidthなどで％表示に大きさを変えられるのでしょうか？
Illustratorで作った画像に限りませんが、
通常のimgタグでの画像はwidthやheightで%表示ができます。
文脈からすると、ここでおっしゃっているのは、
おそらくはコルクボードの部分のような、
backgroundで指定した背景画像のことでしょうか。
ちなみに背景画像も、
background-size: ○% ○%;
にて、％で大きさを変えることができます。
> ２．各ページ、背景の画像の上に写真を横幅いっぱいに広げてみたのですが、
> リキッドレイアウトで％にしても上手く表示されませんでした。（背景の上に写真を重ねてしまった為？）
トップ以外は画像が、width="1920" height="960"で置かれていますが、
％指定にすれば論理的には広がるはずです。
少なくとも、トップは100%指定できちんと広がっていますから、
同じようにすればいけると思います。
（できない場合は、その問題を１つずつ切り分けてみられると良いでしょう）
どのくらいの大きさにすれば良いかは、
どんなターゲットユーザーを想定しているかや、
またはどのくらいきれいに見せたいかによって検討します。
完全なPCサイト（スマホサイトは別）であれば、
PCでウィンドウサイズを広げたり狭めたりしながら確認し、
ほどほどにきれいであればそれで良いと思います。
スマホの場合、今の高解像度端末（iPhoneのRetina等）は
表示サイズの２倍のサイズが良いともいいますが、
まずは実機でテストしながら試してみて、
肌感覚で画像の大きさを掴んだ方が良いように思います。
後述しますが、見た目をきれいにするあまり、
容量が大きくなりがちなことには注意が必要です。
そのためデバイスによって異なる解像度の画像を
読み込ませる方法もあります。
> htmlやcssでコーディングしている段階で、こうしたらいいんじゃないかという新しい案が出てきた場合、
> もう一度ワイヤーフレームを書き直したほうがよろしいでしょうか？
本当のお仕事での制作と、
プライベートな制作とで違いがあるように思います。
お仕事ですと、ワイヤーフレームを
クライアントに承認いただいた後は、
作る段階ですでに熟考しているため、基本的には後戻りはあまりしません。
（アイデアを進言して、承認を得られればその限りではありませんが、
後戻りするとコストが増えてしまうのも理由です）
プライベートな制作、しかも学習途中ですから、
次回に活かせればどちらでも良いように思います。
ただ、書き直しもしやすいですし、
手書きよりも、デジタルデータがお勧めです。
> ４．サイトを作る際、モバイルファーストがいいのでしょうか？それともPCから作った方がいいのでしょうか？
そのような概念もありますが、案件次第だと思います。
ターゲットユーザーがどのような層なのか、
PCで見てもらいたいのか、スマホなのか等によって変わります。
また、そもそも１つのページでスマホなどの様々なデバイスを対応させるのか、
デバイスに応じて違うHTML/CSSを返すのか、
デバイスに対応した専用ページへ飛ばすのか等、
案件により変わってきます。
コストも変わってきますし、
状況により最適な選択が変わりますので、
それらは、クライアントと相談して決定します。
> ５．私のようにまだ勉強中の場合、分かりやすいカラムのレイアウトを沢山作ったほうが作りやすいのでしょうか？
一般的なサイトでよく見る形式のサイトが、
練習には良いように思います。
（横１列のグローバルナビゲーションがあり、
サイドメニューもある２カラム構成のサイトなど）
レスポンシブWebデザインも、最初からできなくても、
基本が上達してきてからやっても遅くはないと思います。
それよりも、作るサイトのタイプが少し気になります。
今回のような架空のサイトを作ることで得られる事もあるのですが、
できればご自身の趣味のサイトなど、
生きたサイトをたくさん作られることをお勧めします。
サイトの制作・運営・更新をして、
初めてわかることが非常にたくさんあります。
例えば、
・ある部分のデザインを変えたら、○%クリック率がアップした。
・文章を追加したら、意外なキーワードで検索の上位にでてアクセスが増えた。
・ある施策を行ったらメールをもらえる数が○%増えた。
等ということは、架空のサイトを作るだけでは絶対に身につきません。
特に、将来フリーランスを目指されていらっしゃるとのことですので、
生きたサイトをたくさん制作＆運営した経験が、
クライアントへのアドバイスに活きてくるでしょう。
> 練習段階や将来、サンプルページ等を作ることがある場合、今回の様に完璧に材料を集める必要はあるのでしょうか？
クライアントの要望からイメージ画像を自分で選ぶこともありますから、
全くの無駄では無いとは思います。
……ですが、素材は全て用意されている案件も多いですし、
文章にいたってはほぼ全ての案件で、
クライアントが用意してくれます。
したがって個人的には、ちょっと時間がもったいない気もしますね。
特に、架空のサイトではなおさらです。
繰り返しになりますが、
まずはご自身をクライアントとし、
趣味のサイトを作られることをお勧めします。
そうすれば、素材集めも楽しいですし、
サイトは自分の資産になりますから、無駄になることもありませんので。
■その他
▽デザイン
％にできれば解決すると思いますが、
各ページのメイン画像が大きすぎるので、
こちらを小さくすればだいぶ見栄えが良くなると思います。
ただ、メイン画像はぽんと置いてあるだけなので、
（それはそれで良いこともあるのですが）現状は
少し写真に頼りすぎかな、とも思います。
例えばキャッチコピーを載せてみたり、
何か加工できないか考えてみてもよいかもしれません。
実際は、素材が少ない中で
デザインしなければならないことも多いので、
そうやって考えることは、実際の仕事で役立ちます。
あとは、デザインは年単位で努力しないと
うまくならないので、引き続きサイト制作で
鍛えられると良いと思います。
こればっかりはデザインの原理原則を書籍などで学んだ上で、
作りまくるしかありません。
▽縦横比
「Wanderung」部分の画像が、
縦横比が少しおかしい（縦に伸びている）ように思います。
基本的に、写真画像の縦横比を変えると、
一気にプロっぽさを失ってしまうので、
変えないようにお使いになると良いでしょう。
▽コーディング
ざっくりと見たところ、
明らかに気になるところはありませんでした。
文法チェッカーにかけて、
エラーがでないレベルになれれば大丈夫です。
【文法チェッカーで正しい(X)HTML/CSSを書こう】
http://www.be-webdesigner.com/tips/coding/syntax_checker.htm
先ほどもふれましたが、今度はより一般的な、
２カラムのデザイン・コーディングにも
チャレンジされると良いと思います。
▽容量について
現在トップページが4.1MBの容量があります。
これだけあると、特にスマホユーザーにとっては
通信料が増えて大変ですので、
容量を気にかけて作られると良いでしょう。
※例えばFirefoxであれば、Firebugというアドオンが便利、
Chromeでも、デベロッパーツールで容量が見られます。
詳しくは検索してみてください。
最後になりますが、実は評価する際には、
できるだけ仕様もお聞かせいただけると、
より違ったアドバイスが出来ます。
特に、
・どんな人に向けて作ったサイトで、
・そのサイトの目的（ゴール）はなんなのか、
は大事です。
しかしながら、ドイツ語が読めないので、
それらがわかってもアドバイスが難しいのが正直なところですm(__)m
そのため無難なアドバイスになってしまったかもしれませんが、
少しでも参考になるところがあれば幸いです。
馬場誠
12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。
↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)