DESIGN IT YOURSELF.

BUROKI


top

blog

  • top
  • blog
  • 初心者必見。webデザインを仕事にするために必要な6つのこと

初心者必見。webデザインを仕事にするために必要な6つのこと

design_thing

  • top
  • blog
  • 初心者必見。webデザインを仕事にするために必要な6つのこと

初心者必見。webデザインを仕事にするために必要な6つのこと

2019.04.08.

スポンサーリンク

どうもです・・
永谷園のお茶漬け海苔ならわさび派、ブロキです。でも梅茶漬けも捨てがたい。

ボクは元々webデザイナーになりたくでデザインの道を志したのですが、いま現在webデザイナーになりたくて勉強している人、これからはじめる人、はじめたくて色々調べている人、とりあえずホームページをつくりたい人などいらっしゃいますよね。
ボク自身は2007年ごろからwebデザインを学び、約12年ほどやってきました。そう考えるとけっこう長いな・・ギュッとしたら5年くらいかもしれませんが。(笑)

そんな人のために今のweb制作の状況なども踏まえて、仕事にするために僭越ながらもいくつかアドバイスできたらと今回のブログを書くことにします。大丈夫です、何も心配いりません、初心者でも独学でもwebデザイナーになれます。

webデザイナーになりたい人の場合、面接に1番必要なのは学歴でも資格でもなく、作品です。あなたがどれだけスキルがあるか、作品として提出したwebサイトを見ればプロならすぐにわかります。仕事にするには面接に受からなければいけないので、まずスタートラインに立てるようにすることが大事ですね。

index

このブログの目次

1. 自分のサーバーとドメインを持つ

ボクはよくwebの世界を現実世界と捉えて考えます。もしwebの世界で生きていくとなった場合、まず生活できる場所、家が必要ですよね。どんな人でも結局はどこかで生活しています。それが家なのかネットカフェなのかはわかりませんが・・どこかで寝泊まりしています。webの世界でもまず必要なのは「場所」です。ボクはサーバーを土地、ドメインを住所だと思っています。このふたつをレンタル、取得するのにwebデザインのスキルも勉強も要りません。

ボクはサーバーは「ロリポップ」というレンタルサーバーでレンタルし、「ムームードメイン」というドメイン取得サービスにてburoki-design.comという独自ドメインを取得しました。他にもいいサービスはあるので、自分に合ったサーバーとドメインを選べばいいと思います。

まずは家を建てる準備ですね。自分の場所を持っていると後々便利になってくることもあるのではじめのうちから取得しておくことをおすすめします。おすすめというか必須ですね。

2. htmlでwebページをつくりページ構造を知る

サーバーとドメインをレンタル取得し、FTP(ネットワークでファイルと転送するための道みたいなものです)でサーバーに接続できるようになったら、ここからwebの勉強を開始です!まずはプレハブの部屋をつくっていくようにwebページをつくります。webページは基本的に「html(ハイパー・テキスト・マークアップ・ランゲージの略語です)」という文書構造で出来ています。もちろんこのブログも同じです。htmlとは、webページをつくるためのもっとも簡単なマークアップ言語のことです。

簡単なページで全然かまわないです。「h1」は大見出しタグで「p」は段落タグ、「a」はリンクタグというhtmlのタグの役割を実際にページをつくることで身につけていきます。htmlの本来の役割は文書なので、新聞をつくるようなイメージでタグと記載する情報を整理してページをつくっていくのがミソです。

ボクははじめてwebページをつくったとき、すごく感動しました。特にリンクを貼ってそのリンクをクリックして、別のページに移動した瞬間・・自分のつくったページのここがクリックできるようなった!とめちゃくちゃ感動したのを覚えています。(笑)今は自動でhtmlを書いてくれる便利なツールがあったりしますが、文書構造がわかるようになるのでまずはアナログですが自分で手打ちしてhtmlページをつくっていくことが大事だと思います。仕事ではhtmlの一部を編集・修正する作業なんていくらでもありますからね・・

3. cssでwebページを装飾してみる

webページをある程度つくれるようになったら次は「css」という言語を勉強します。cssとは(カスケーディング・スタイル・シート)の略語で、ページのレイアウトを整えたり文字の色を変えたり、webページを装飾する役割の言語です。

このcssを使って、2の行程で制作したwebページを装飾していきます。ここのpタグの文字サイズはこれくらい、このh2見出しタグには下線を引いて、レイアウトはこうしてなど・・cssで用意されているプロパティは多岐に渡り、いろんな表現ができます。ボクも勉強しはじめたときはかなり難しいなと思いましたが、ページの見栄えが目に見えてわかるので覚えてきたら書くのも楽しくなってきます。

装飾したページを確認しながら、cssを理解していきましょう。

4. 自分のサーバーで公開してみる

cssをある程度理解して装飾ができるようになってきたら、FTPでサーバーに接続し、制作したhtmlとcssファイルをサーバーにアップロードします。

アップロードしたあとは、そのURLをブラウザに入力し、実際にwebページにアクセスしてみます。例えば、取得したドメインがburoki-design.comで、htmlファイル名がtest.htmlの場合、https://buroki-design.com/test.htmlとブラウザのアドレス欄に入力します。見事ページが表示されたらサーバーに公開されたということになります。

これで面接の際にそのページのURLを提示すると作品として見なされ、アクセスできるようになります。webデザインの場合、この「作品としてのURLが有るか無いか」でかなり違ってきます。

5. webサイトをつくる

webページをいくつかつくれるようになってきたら、次はwebサイトをつくってみます。自分のホームページでもいいし、架空のパン屋さんのサイトでも大丈夫です。例えば自分のホームページの場合どんなページが必要だと思いますか?入り口となるTOPページ以外にプロフィールのページ、趣味のページ、日記ページ、お問い合わせページなど・・いろいろ必要なページが出てきますね。その目的に沿ったページをつくっていきます。

ここで注意してもらいたいのは、例えばボクの場合、まず「buroki」というフォルダをつくってから、そのフォルダの中にhtmlページやcssファイルをつくって格納していきます。はじめにフォルダ内にまとめておくことでファイルの管理もしやすくなります。

ひとつテーマに沿ったサイトをつくれたら、次は違うテーマでサイトをつくっていきましょう。カフェのサイトでも企業サイトでもOKです。違うテーマでつくる度に違う要素が必ず入ってくるのでできるだけ多くつくることをおすすめします。ページには写真もどんどん載せていきましょう。

6. 新しい技術を取り入れつつ、ひたすらつくる

この工程までくると、webサイトのつくり方がだいぶ理解できてきていると思います。プロのようなサイトでなくても問題ないです。クオリティは仕事にしたあとからいくらでもついてきます。「サイトをつくったことがあるのかないのか」、仕事にする前はここが重要なんです。バナーでもなく単一のwebページでもなく、ページの集合体であるwebサイト。世の中に公開されているwebページはすべてどこかのサイトの中に存在しています。サイトをつくることで各ページの役割やデザインまで明確になってくる。その訓練が必要なのです。

そして、webの世界は日進月歩といわれるくらい日々新しい技術が開発されています。その情報に敏感になって、新しい技術をつくったページに取り入れていきます。例えばスマホでもちゃんと表示されるサイトにするであったり、ページの一部分にアニメーションを入れるであったり、スクロールするとナビゲーションが固定されたり・・そういう技術を学び、ひたすら作品をつくります。

かくいうボクは面接に行く前に1年間、サイトをつくりまくっていました。自分のサイトから平野区のサイト(地元なので)、架空の人材派遣会社のサイト、音楽が好きなのでインディーレーベルのサイト・・ボツにしたサイトもたくさんあったし、デザインを何度もやり直したサイトもあります。でもつくることで間違いなく成長していきました。「手を動かす」に勝るものはないですね。本を読んでわかったつもりになることに意味はありません。実践あるのみ!です。

ここまできたらあとは面接です

初心者が面接を受けられるようになるまで、大きく分けると大体この6項目です。すべての項目をひと通り経験したらそのサイトのURLを作品として制作会社に応募し、書類選考ののちに面接です。上記の工程がめんどくさい!と思った方、多分あなたはwebデザイナーに向いていません。(笑)webデザイナーとはサイト制作・運営・新しい技術の習得の繰り返しです。面接に行くまでに慣れておくことが重要なのです。

面接に受かるためのここだけのヒント

ただ、初心者の場合はここまでやっても不採用になるのはよくあります。
ボクも書類選考は通ったものの、面接で不採用になった経験はもちろん何度もあります。ただ、作品を提示した時点で書類選考はかなり通りやすくなります。

そして面接で好印象を与えるヒントをひとつだけお教えします。それは「つくったサイトを説明できるようになっておこう」ということです。面接ではほぼ間違いなくつくったサイトを一緒に見ることになると思われます。そしてそのサイトについていろんな質問をされると思います。その質問に対して、なぜこのデザインにしたのか、そこには理由があるはずです。その理由を自分なりに答えられるようになっておくことが面接ではとても大切です。準備しておきましょう。

最近面接のコツを教えるブログを書きました

デザイナーとして面接に臨む際に先方の印象に残らせるコツを書きました。よかったらそちらのブログも下記のリンクからご覧になってみてください。

このブログを読んでくれた人が一人でも多くwebデザイナーになれますように・・GOOD LUCK!

スポンサーリンク

BUROKI写真

BUROKI写真

はじめまして! BUROKIです。

ブログをご覧いただきどうもありがとうございます。ブロキと申します。ベンチャー企業のインハウスデザイナーとして11年間様々な媒体のデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います。(笑)

他にもいろんな作品の紹介やブログを書いてるのでぜひ見てみてください。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談くださいね。

ブログをご覧いただきどうもありがとうございます。他にもいろんな作品の紹介やブログを書いてるのでぜひ見てみてください。制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談くださいね。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

スポンサーリンク

blog list

ブログ一覧

private

お呼ばれしたので奈良で開催されたwebデザイナーの飲み会に参加してきました

12月7日(土)の18時ごろ、天王寺からJR大和路線で奈良駅へ向かう・・ ボクが所属しているコミュニティメンバーのデザイナーさんから奈良でwebデザイ…

2019.12.09.

design_thing

どれを選べばいい?名刺を発注するときの業者と用紙の選び方

「自分の名刺をつくりたい!」「上司に名刺の発注頼まれたけど、どこにお願いしたらいいのかわからない・・」 これはクリエイターやデザイナーでなく…

2019.12.05.

private

ホームベーカリーでつくった自家製パンの出来栄えに涙が止まらない

相方が数年前にもらったというこのホームベーカリー・・ 廣瀬というメーカー?がオリジナルでつくっているホームベーカリーだそうで、ブランド名は「…

2019.12.03.

private

遅めの盆休み。石川県加賀温泉旅行の2日目と最終日

今回のブログは前回の加賀温泉旅行初日ブログの続きということで・・書いていきたいと思います。 前回のブログを見逃している人は下記のリンクよりご…

2019.11.30.

private

遅めの盆休み。石川県の加賀温泉を旅行してます

いまこのブログを旅館の部屋から夜景を見ながら書いています。 フリーランスになってから連休らしい連休がなく、仕事がひと段落つきそうな11月末のこ…

2019.11.28.

private

京橋で開催されたクリエイター忘年会に参加してきました

日曜日の夜はちょっと早めのクリエイター忘年会にお呼ばれしていたので、地下鉄で京橋へ・・。 北側の商店街内にある「燻製イタリア酒場 京橋 ORA」…

2019.11.26.

blogをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル