HUMOR in DESIGN and CREATIVE.

BUROKI


top

BUROKI blog

ブログ

  • top
  • blog
  • ビギナー必見。webデザインを仕事にするために必要なこと

ビギナー必見。webデザインを仕事にするために必要なこと

design_thing

  • top
  • blog
  • ビギナー必見。webデザインを仕事にするために必要なこと

ビギナー必見。webデザインを仕事にするために必要なこと

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月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います。(笑)

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

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

ご依頼・お問い合わせ

ご依頼・お問い合わせ

Latest results

最新の制作実績

blog list

ブログ一覧

private

new

ダービーウィークは毎年のお楽しみ。スポーツ雑誌Numberの特集号を買う

ダービーウィークは毎年のお楽しみ。スポーツ雑誌Numberの特集号を買う

今週末はいよいよ日本ダービー。競馬シミュレーションゲームの「ダビスタ96」にハマりまくって、99年度版が発売されたにもかかわらず96年版を2000年…

2019.05.25.

private

new

長居公園の近くにある気になっていた肉バルBoo Boo Kitchenで晩ごはん

長居公園の近くにある気になっていた肉バルBoo Boo Kitchenで晩ごはん

クーラーを買いに行った2日前の夜に現在長居公園で開催しているビールイベント・オクトーバーフェストで飲んで踊って楽しんだあと、もう少し飲みたく…

2019.05.24.

private

new

大阪一豪華な朝ごはん!?飯炊き仙人のいるお店「ゲコ亭」にて銀シャリを食す

大阪一豪華な朝ごはん!?飯炊き仙人のいるお店「ゲコ亭」にて銀シャリを食す

実は新居にはまだクーラーがありません・・しかも今週末からまだ5月だというのにかなり暑くなるということで。これは早く設置しといたほうがいいよね…

2019.05.23.

design_thing

new

2012年から現在までのBUROKIロゴデザインの移り変わり

2012年から現在までのBUROKIロゴデザインの移り変わり

インハウスデザイナーを本業としながら「BUROKI design」として個人でもデザイン活動を開始したのが2012年。いまこのwebサイトの左上に掲げているボ…

2019.05.22.

private

new

送別会の夜にもらった「WATERMAN」のボールペンとは?

送別会の夜にもらった「WATERMAN」のボールペンとは?

もう2ヶ月くらい前の話で申し訳ないのですが、前職を退職したときに送別会を開いてもらったんですね。そのときに実は元同僚でありボクのYouTubeチャ…

2019.05.21.

private

webサイトに載せる写真がないなら一眼レフカメラで自分で撮ればいい

webサイトに載せる写真がないなら一眼レフカメラで自分で撮ればいい

昨日は昼すぎから近鉄の八戸ノ里駅へ・・もう5月の半ばということもあって暑くなりましたね。 前職から仲良くしてくださっていて、名刺や封筒なども…

2019.05.17.

all blog list

Latest contents

最新コンテンツ一覧

Do you like "B"?

最後まで見てくださって、本当にありがとうございます。

最後まで見てくださって、
本当にありがとうございます。

topトップページ

aboutブロキについて

designデザイン

blogブログ

films制作動画

cassetteカセットテープ

contactお問い合わせ

snsソーシャル