見出し画像

訓練校日記(3日目)午前の部

今日は遅刻せずにすんだよ|´(・)`)ノ
ただ、遅延で10分前だったけどね!

週明けでまた寝坊するんじゃないかビクビクしてたけど大丈夫だった(´(・)`)
来週まで本格的な勉強はしないから。クラスに馴染めるようにがんばるか。

一日の流れ

現役のフロントエンジニアをしてる方を講師に仕事の流れの説明
仕事でのサイト制作工程のノウハウ話
会社訪問、見学
インターンとかポートフォリオ制作とか面接対応とか

現役の方に実務でのWeb制作ってこんなんだよって話から、自分がどの規模の会社を目指すのかの話。

まず、聞いてておもしろかったなって思った(´(・)`)
なんせ、実務を知らないので、「こんなのか」「こうなってるのか」って
聞けたのはよかった。

サイト制作ではだいたい3ステップに分けて進行していく。

1.サイト構成ーサイトマップ(ワイヤーフレーム)
 ・ターゲットと目的を決める。
 どの年齢層を狙うのか?
 (若年層、シニア層、男、女、学生etc…ピンポイントなのか全体なのか)

 ・何のために?どういう意図で?
 (公共の発信、自社の紹介、サービスの発信etc...)

 ・閲覧する人が使いやすいか?
 (ユーザビリティ)

 ・SEO対策
 (どういうワードやどこに散りばめるか)

このターゲットと目的がブレてしまうと閲覧する人には情報が届かない。
受注側、発注側共にこういうものを作りましょうって、意思の共有をしないと後が大変になる。
同じ考え、目線になるまで、とことん突き詰める

同時に閲覧者がわかりやすいサイト作り、欲しい情報が手に入りやすいサイト構成にする必要がある。
深くなればなるほど、閲覧者はそのサイトから離れていく。
(だいたい1クリックで50%減)
逆に言えば、これは知られるのはヤダなってとこはわかりづらくすることもできる。
(お問い合わせしにくくしたり)

SEO対策はどこまでワードを散りばめるか?
検索結果で1ページ目で表示させるならどうしたらいいか?
過度にやりすぎるとスパム扱いになってしまうので、微妙な塩梅で。

講師の方は最初の段階で最終決定権を持ってる人に確認してもらってから
次の工程に進むように、仕事を進めると言ってた。

ちなみに、自分はサイトの構成とデザインは一緒だと思ってたけど、
(厳密に言うと似てると思ってた)
全然違うんだよってことを知ったよ。(´(・)`)

この段階ではあくまでもたたき台であり、
階層とかこういうページを作りましょうね、
これはいりませんね、
これは階層の上に起きましょう

などを決めるだけ。
この時点でサイトの目的とターゲット絶対にブレないようにする。

2.デザイン(トーン&マナー)
 ・配色、アイコン、文などを決める
 (イラスト、写真、両方、多い少ないetc...)

デザインを統一することをトーン&マナーって呼ぶ
(トンマナとかトーンマナーとか色々呼ぶらしい)
ユーザーは今までのネット閲覧の経験則で動いてるため
ちょっととでもおかしいと離れてしまう。

ここで初めて、サイトの形とかを作っていく。
気をつけないといけないのがデザインを統一すること。
(リンクの色がページ毎に違う。アイコンが変わってしまうなど。)
こういうことがないようにする必要がある。

こうならないためにもデザインは統一しておく。
ここでも、最終決定権の人にチェックしてもらう。

3.HTMLコーディング(マークアップ)
 ・HTML/CSSで実際にコーディングする
  静的なサイトならこの段階で終了
  動的なサイトならさらにプログラマーがいる

構成とデザインが決まってしまえば、あとはその通りに作っていくだけなのである。
スピードと正確さが要求される

まとめ
・ターゲットを決め、その目的にあったものを作る。
・お互いの意思疎通は細かいとこまでとことんやる。
・デザインを統一し、閲覧者が迷子にならないようにする。
・情報量の多さ、なおかつ欲しい情報が簡単に手に入るサイト構成。
・いかに早く作れるかがカギ。

と、長々書いたけど自分のうろ覚えもあるし、間違った理解をしているかもしれないので、こういうことをやってるんだなって思ってもらえればいいかな(´(・)`)

これだけできればいいやでなく+αの技術とかもっとかないとこの先生き残れないと思われるので一通りはできるようにならないとな

写真をご利用ありがとうございます。 これからもがんばっていきます。 noteもTwitterもフォローお願いします。