個別サポート事例 カテゴリーの記事一覧

レスポンシブWebデザイン・Webデザイン講座を受講された方への個別サポート事例をご紹介しています。添削サポートが好評です。

  • 個別サポート事例

カリキュラム終了後、自サイトを作成してみました。添削をお願いします。

カリキュラム終了後、自サイトを作成してみました。添削をお願いします。

 

自サイトを作成 独学 Webデザイン

こちらの受講生の方は、Webデザイン講座のカリキュラムを一通り、終えられ、ご自身で作りたかったサイトを作られました。

今回はその添削依頼をいただきましたので、ご質問にお答えし、気になった点をお伝えしました。

サポート内容

デザインについて

添削は、psdファイルでお送りします。

レイヤー内に、添削01~03がありますので、それぞれ、表示・非表示を切り替えて確認してみて下さい。

情報のブロックを意識する。

それぞれの要素は、情報のブロックですので、端を揃えると、グッとよくなると思います。

あとは、ブロックの上下の余白や文字サイズのバランスです。

HTML・CSSについて

HTMLは、とてもきれいに書かれています。

CSSを拝見したところ、各要素がpositionプロパティを使用して配置されています。

しかし、positionプロパティは、Webデザイン講座のカリキュラムのような、header内のロゴやメニューの配置には効果的ですが、大枠となる要素に使用することはあまりありません。

例えば、「当サイトの目的」や「プロフィール」の要素を横並びにさせるには、floatプロパティを使います。

また、<section id=”menu”>内のナビゲーションも同様で、メニューには、ul liタグを利用し、これもfloatプロパティで横並びにさせます。

メニューのロールオーバーは、きれいにできていますね。

この件は、私の方からもサンプルを出しますのでお待ちください。


  • 個別サポート事例

飲食店の実案件の添削

私が初めてお客様に提供させて頂いたサイトです。

サイトを添削頂き、ご経験から、

・サイト構成
・掲載記事

などのアドバイスを頂けたら・・、と考えております。

飲食店の実案件の添削

こちらの受講生の方は、すでにWeb制作の受注をされていましたが、さらに、スキルアップをなさりたい、ということでWebデザイン講座をご受講いただきました。

Webデザイン講座

サポート内容

黒を貴重とし、お店の雰囲気、お酒、料理を上手く印象つけられていると思います。

サイト構成も上手くまとめられていると思います。

SEOを考慮したタイトルの付け方もさすがです。

独学でここまで作りこまれたのだとしたら、素晴らしいですね。

以下、気がついた点をお伝えします。

Webページを開いた時

〇〇市にある〇〇料理の居酒屋であることがわかるのはよいと思います。

ただ、何が特徴なのかが、わかりつらいです。

たとえば、

誰が(〇〇の人?〇〇でどれくらいか料理経験があるシェフ?)

どんな風に〇〇の食材を手に入れて料理しているのか?

〇〇の〇〇〇〇

・・・とういう情報であったり、

metaタグ内の
「〇〇〇〇〇〇〇〇〇〇」

の情報を、ページに配置してもよいと思います。

SEOを考えた時、トップページの情報が少ない。

metaタグと絡めて、トップページ内の何気ない文章の中に、狙っている「〇〇,〇〇」のキーワードを配置するとよいでしょう。

黒背景に白い文字は読みにくいです。

黒背景でのデザインは、高級感や洗練感、個性的なイメージを出すことができますが、その分、見せ方にもテクニックを要します。

すべてが同じ「黒」の背景に「白」の文字という構成が単調なので情報を読み取りにくいです。

このサイトのアピールする点、どこを目立たせたいのかを見直して、メリハリをつけられるといいですね。

特に、読ませたい長文、〇〇の部分は、白など薄めの背景にしたほうがよいと思います。

予約ボタンや電話番号が目立たない

ナビゲーションメニューの中の「ご予約」以外にも目立つように予約ボタンや電話番号を配置するとよいと思います。

HTMLのファイル名

今回は、納品されているので、

page1.html、page2.html・・・・でもよいかと思いますが、

次回からは、HTMLファイル名には内容と関連のある名前をつけましょう。

特に、ファイル名の付け方にルールや規則はないのですが、自分なりのファイル名の付け方を作られるとよいと思います。

SEO対策として、検索エンジンもファイル名を見るようです。

当サイト、Webクリエイターズチップスの場合、

運営者情報のページには、aboutus.html

メルマガのページには、magazine.html

などとしています。

いろんなWebサイトを見て研究してみてください。

「お店の人の顔」が見えるサイト

クライアント側の考えにもよりますが、私なら「お店の人の顔」が見えるサイトをご提案します。

Webサイトの一部にお店のオーナーやスタッフの顔を掲載する。

添付画像参照

サイト構成やデザイン等、大幅に変更するのは大変だと思います。

CSSの設定ですぐに修正できそうな部分に解説をつけてみましたので参考になさってみて下さい。

Webデザインは情報のブロックの集まりです。

この情報のブロックを意識してみると、全体的に余白が少ないです。
(ブロック同士がくっつきすぎています。)

情報のブロックを意識して余白をあけ、見出し文字のフォントサイズを上げるだけでメリハリがつきます。

 


  • 個別サポート事例

自主練ですが、ひとつサイトのトップページをデザインしてみましたのでアドバイスをお願いします。

自主練ですが、ひとつサイトのトップページをデザインしてみましたのでアドバイスをお願いします。
※落ち着いた頃、サイトの制作を相談されるかもしれない案件です。

・ページの構成について
ページ数が多すぎる?
伝えたい内容を1ページ内にもっと凝縮したほうがよいか?

・トップページとしてのデザインについて
下に行けばいくほど、デザインがまとまらなくなってしまいました。

Webデザイン 独学 添削

こちらの受講生の方は、Webデザイン講座のカリキュラムを一通り、終えられ、練習サイトを作られました。

今回はその添削依頼をいただきましたので、ご質問にお答えし、気になった点をお伝えしました。

サポート内容

ターゲット、提案イメージ、問題点、参考サイト、競合の状況もよく把握され、まとめられていると思います。

↑この部分が一番重要です。

フレッシュさ、親近感、温かみ、優しさが伝わってくるデザインで、背景とイラストに工夫が見られて、スキルアップをされているなぁと思います。

ただ、気を付けないと、地味な印象になりがちなので注意も必要ですね。

 

下に行けばいくほど、デザインがまとまらなくなってしまいました・・・

おっしゃるように、中央から下はさみしい感じがします。

独学でWebデザイン自主練のムツカシイところは、配置する情報を決めかねてしまうところだと思います。

この情報をここに配置する」と決まっていれば、デザインのまとまりがでるのですが、想像だけでは、なかなか難しいです。

 

背景に水彩風のデザインをしたため、ナビをhtmlで配置するのは難しいか?

png形式で書き出せば問題ないと思います。

 

ページの構成 ページ数が多すぎる?
伝えたい内容を1ページ内にもっと凝縮したほうがよいか?

これは、各ページの内容量によりますね。

内容量が少なければ1ページ内に凝縮してもよいと思います。

逆に充実していれば、一部のみをトップで見せて、続きはこちら・・・でというように下層ページに飛ばしてもいいです。

どんなイメージを前面に出し、何をアピールするか?

どんなイメージを前面に出し、何をアピールするか?

この部分を考えてみましょう。

私なら、「〇〇の人の顔が見えるホームページ」を提案します。

同時に「〇〇のフレッシュさ」が伝わる写真をふんだんに使用して、トップページの一番目立つところに配置すると思います。

イラストは、よくできているので、「〇〇」の文字の左にロゴマークとして配置、(ページ下部のアクセスマップ右にも)してもよいかもしれません。

サイズが小さければ、各箇所にイラストが登場してもうるさくないですし、上手く利用すれば、逆に統一感が出ます。


  • 個別サポート事例

サイトの作成・その後の運営について

サイトを作るにあたって、Webサイトのデザインは、やり方によっては、Photoshopやillustratorで作った画像を並べるだけで出来る、と思うのですがそういうやり方は『アリ』なんでしょうか?

例えば、添削していただいた友人のサイトの『お知らせ・新着情報』は画像になっています。

ただ、サイト運営上あまりよくない気もします。
(例えば、更新してもネット上で検索にひっかかりづらい・・・とか)

やっぱり、極力テキストを打って作ったほうがいいのでしょうか。

新着情報は、今後も更新の頻度が多そうなので、いっそのこと、ブログもしくはFBをリンクさせたら引き渡したあとは、本人で更新できるのかなあ、と単純に考えていますが、運営上、どうでしょうか。

費用のかからないやり方をまずは提案して、そのメリット・デメリットを理解してもらったうえで今後のサイトの管理について決めてもらいたいと思うのですが・・・。

サポート内容

こちらの受講生の方は、独学でWebデザインを学び、フリーランスとして仕事を請負いはじめたばかりの方でした。

  • 検索エンジンが、テキストと画像をどのように認識するか?
  • リンクが設定された(<a>タグで挟まれた)テキストの重要性。
  • CMSでのコンテンツ管理のメリット・デメリット。
  • Webサイト納品後のサポート体制やご提案方法。
  • ブログやSNSの有効性

などをお伝えさせていただきました。

まだまだ、身につけるべきスキルはたくさんありますが、考え方やご提案方法を工夫すれば、クライアントに喜んでいただける仕事はいくらでもできます。

今のFさんの進み方、考え方なら大丈夫です!

一歩ずつ、いきましょう!


  • 個別サポート事例

最初に引き受けた案件。いくらくらいの見積りになるでしょうか?

友人の会社のサイトを作りました。
・初めて作ったサイトなので、コードが不安。
・全体的なアドバイスをお願いします。友人よりお金をいただける話が出ています。
一般的には、この程度のサイトでいくらくらいの見積りになるでしょうか。

サポート内容

Webデザイン講座 サポート・添削内容

全体的なアドバイスをお願いします。

スクールの卒業制作としては、コンテンツの構成や見せ方は完成度が高いと思います。

ここまで、完成させるには大変だったのではないですか?

【気になる点】

その1 余白と各情報のブロックのバランス

ロゴ・メニューはイメージ画像との余白がほとんどないのに対し、その他の部分は余白が多いですね。

余白を上手く使うことで、優雅さや高級感、洗練されたイメージを出すことができますが、そのバランスがバラバラだとさみしい感じになってしまいます。

また、各情報のブロックの区別を明確にするともっと良くなると思います。

例えば、添付画像の見出しの水色の部分のように、両サイドまで見出しの背景をつけるとブロックの区別が明確になると思います。
(水色の色はただの目印です。)

〇〇ページの下の見出しは、見やすくてgoodだと思います。

〇〇関連業のWebサイトは、その余白や情報のブロックをどのようにみせているか、研究してみて下さい。

その2 本文の文字色

本文の文字色は、黒か黒に近いグレーのほうが読みやすいと思います。

その3 下層ページにパンくずリストをつける

トップページ以下のページに移動した際、メニューの下辺りにパンくずリストがあるとユーザーは安心すると思います。

例えば、ページからページに移動した時、一瞬、どこのページに移動してしまったのかわからなくなってしまう感じがします。

 

初めて作ったサイトなので、コードが不安。

ソースもきれいで上手くマークアップされていると思いますが、マージンは、改行タグではなくCSSで設定しましょう。

ところどころ、マークアップされていないHTMLタグがありますね。

例えば、〇〇ページの

<img src=”images/〇〇.gif” width=”125″ height=”38″ alt=”〇〇” />

ここなら<h2>で囲んでもいいかもしれません。

 

 一般的には、この程度のサイトでいくらくらいの見積りになるでしょうか。

見積もり金額について具体的な数字を挙げてアドバイスさせていただきました。

見積もり価格は、お答えが難しいのですが・・・はじめは、ここが一番悩む部分でもありますよね。

どこのスクールの先生も、この価格の部分だけは、はっきりとした金額は示さないと思います。

まぁ・・・ここがWebクリオンラインのスゴイところ(?)で私の感覚ですが、金額を出すとすれば

例えば、トップページを入れて6ページ構成であるとして、

下は〇〇万円から上は〇〇万位が妥当かと思います。

どうしても、経験が浅いうちは、クライアントにもそれが見えてしまうので、高い金額は提示できませんが、経験を積んで自信がついてくれば、〇〇万以上の見積もりもできるようになると思います。

経験を積むと、デザイン・制作技術の向上だけでなく、その他のブランディングやコンサルティング部分のご提案もできるようになるからです。

私は初めのうちは、

企画・構成(ディレクション)料金

トップページの
デザイン料金・コーディング料金

下層ページの
デザイン料金・コーディング料金

という風に分けて見積もりをしていました。

しかし、下層ページの場合は、案件によりコンテンツ内容が簡単なものから複雑なものまで様々ですし、ページ数によっても違ってきます。

素材や原稿の用意はどちらがするのか・・・などもあり、一概に料金は決まりません。

これからFさんの独自の見積もり方法を見つける必要がありますね。

 

Fさんより

ご相談にのっていただいて、ありがとうございます。
やっぱり、こうして相談できる場があるととても安心感があります・・・
ひとりだと、なかなか突破口もみつけられませんし・・・
まず、独学も続けられない気がします (笑)


  • 個別サポート事例 Webデザイン編

【Webデザインオンライン講座】個人指導事例 課題があれば取り合えず形にはなるが、自分で0からデザインして作るとなると、そこから進めない。

【課題があれば取り合えず形にはなるが、自分で0からデザインして作るとなると、そこから進めない。】

【Webデザインオンライン講座】個人指導事例をご紹介します。

Yさんより

PS・AI・DW 共、使い方に関しては、ある程度対応出来るものの、デザインとなると全くダメです。

マーケティングをホームページに落とし込む必要が出てきました。

デザインの練習をしていますが、○○のようなデザインはどのような構造になっているのですか?

サポート内容

課題があれば取り合えず形にはなるが、自分で0からデザインして作るとなると、そこから進めない。

Yさんは、【Webデザインオンライン講座】のカリキュラムを最短でこなされた優秀な受講生です。

【課題があれば取り合えず形にはなるが、自分で0からデザインして作るとなると、そこから進めない。】

・・・という部分で苦労されていますが、

これについて、デザインの練習方法をお伝えしたところ、すぐに実践され、デザイン力を磨かれています。

デザインの苦手意識克服の考え方、効率的なデザインの練習方法やノンデザイナーでも少しの工夫でプロっぽく見せられるコツなどもアドバイスさせていただきました。

また、Photoshopのパターンの作り方と応用、パターンをCSSへの組み込む方法を具体的に、Photoshopのファイルサンプルも合わせてお答えしています。

 

【Webデザインオンライン講座】の個人指導は、カリキュラム内容のご質問はもちろん、 受講後の実際のWebデザインの仕事の進め方やクライアントへの提案方法、 新規サイトの立ち上げ方、試作サイトの作り方に関するご質問を多くいただき、内容に合わせて、個別でサポートさせていただいています。

受講生の状況に合わせた柔軟なサポートが 無期限で受けられることが最大の特徴です。

自宅で独学しながらプロを目指す人のためのWebデザインのオンライン講座。

【Webクリオンライン】の詳細はこちらから


  • 個別サポート事例 Webデザイン編

【Webデザインオンライン講座】個人指導事例 美容系のサイトを立ち上げたい。

【美容系のサイトを立ち上げたい。】

【Webデザインオンライン講座】個人指導事例をご紹介します。

Tさんより

全くド素人ながら、今は全ての動画をひと通り視聴完了し、
デザインカンプ(試作サイト)を作ろうとしています。

初めてのオリジナルデザインなので、余白のとり方、
ページの縦・横、背景、フォントのサイズ感がつかめません。

また、ボタンのスライス&書き出しとCSSに落とし込む方法についてもアドバイスお願いいたします。

サポート内容

【Webデザインオンライン講座】個人指導事例 美容系のサイトを立ち上げたい。

こちらの受講生さんは、初心者から始められて、
Webクリの無料講座と同時進行で有料講座を受講されました。

【WordPressを使いこなして美容系のサイトを立ち上げたい。】
という目標を持って、「やれば分かるさ!」という勢いで、
どんどん進まれていく集中力の高い方です。

カリキュラムを受講後に取り掛かられた、試作サイトの全体的なデザインのサイズ感がわからないことで、止まってしまっていらっしゃいました。

全体のデザインイメージとサイズ感をつかむコツ、デザインカンプの各パーツ配置のバランス、ボタンを効率よく書き出し、CSSに落とし込む方法、CSS部分の修正点などをアドバイスさせていただきました。

 

【Webデザインオンライン講座】の個人指導は、カリキュラム内容のご質問はもちろん、 受講後の実際のWebデザインの仕事の進め方やクライアントへの提案方法、 新規サイトの立ち上げ方、試作サイトの作り方に関するご質問を多くいただき、内容に合わせて、個別でサポートさせていただいています。

受講生の状況に合わせた柔軟なサポートが 無期限で受けられることが最大の特徴です。

自宅で独学しながらプロを目指す人のためのWebデザインのオンライン講座。

【Webクリオンライン】の詳細はこちらから


  • 個別サポート事例 Webデザイン編

【Webデザインオンライン講座】個人指導事例 飲食店サイトのWebデザイン

【Webデザインオンライン講座】個人指導事例

【知り合いに頼まれ、飲食店のサイトを作ることになりました。】

個人指導として作品の添削アドバイスを行っています。

Fさんより

知り合いに頼まれ、飲食店のサイトを作ることになりました。

何とかトップページのデザインまでできました。

全体的なアドバイスをお願いします。

 

【Webデザインオンライン講座】個人指導事例 飲食店サイトのWebデザイン

 

添削は、全体的なアドバイスから下層ページの制作の流れ、効率的なコーディングのコツなどをアドバイスさせていただきました。

Fさんは初心者レベルからはじめられ、受講後、2ヶ月でここまで作りこまれた頑張り屋さんです。

知人からのホームページ制作依頼をこなしながら、将来的にはフリーランスのWebデザイナーを目指されています。

【Webデザインオンライン講座】の個人指導は、カリキュラム内容のご質問はもちろん、 受講後の実際のWebデザインの仕事の進め方やクライアントへの提案方法、 新規サイトの立ち上げ方、試作サイトの作り方に関するご質問を多くいただき、内容に合わせて、個別でサポートさせていただいています。

受講生の状況に合わせた柔軟なサポートが 無期限で受けられることが最大の特徴です。

自宅で独学しながらプロを目指す人のためのWebデザインのオンライン講座。

【Webクリオンライン】の詳細はこちらから



Webデザインのスキルを収入にするメールマガジン
フリーランス
Webデザイナー養成講座

登録作業はわずか10秒!
パソコン・スマートフォン・タブレットでWebデザインのスキルを収入にするメルマガを無料で受信できます!

【メールマガジン登録フォーム】
お名前(姓)*
お名前(名)*
メールアドレス*
  • Wordpressオリジナルテーマ作り方講座
  • Webデザイン講座
  • レスポンシブWebデザイン作り方講座
  • Webデザインまとめサイト

PAGE TOP