【プログラミング初心者必見！】Webデザイナーに向いている人の特徴とは
こんにちは、ゆうきです。
名前の通りWebサイトのデザインを手掛けるWebデザイナーは、そのクリエイティブな仕事からとても楽しくやりがいのある業種です。
でも、Webデザイナーという職業に絶対に向いてる！って人がいたり、向いていないだろうなぁって人もまたいるんです。
そこで今回はWebデザイナーにとても向いている人はどんな人なのかについて説明していきます。
Webデザイナーはどんな人が向いているの？
Web制作会社、企業のWeb・デジタル関連部門など、ひと口にWebデザイナーといっても働く場所や業界、環境はさまざまです。
さらに、そのスタイルもクライアントのリクエストに応えようと黙々とパソコンに向かいデザインを磨き上げていく職人派から、打ち合わせで話しながらデザインを作り上げていくコミュニケーション重視派まで、実に多種多様と言えます。
また、「Webデザイナー」という言葉から美大や芸大、あるいはデザインの専門学校を卒業したクリエイティブで個性的な人たちが多いと思われるかもしれませんが、そんなことはありません。
Webサイトをデザインする現場はみなさんが想像するほど閉ざされた世界ではなく、前職はアパレル業界で販売をしていた、ブライダル業界で働いていたなど、さまざまな経歴をもつ方が、現在、正社員や契約社員、派遣社員のWebデザイナーとして活躍しています。
このようにWebデザイナーと言っても千差万別ですが、実は共通点がひとつだけあります。
それは「新しいことが好き」な点です。
業界としてまだ若く、技術は今も発展途上と言えますが、ソフトやツールがどんどん進化しているうえ、クライアントからも新しいデザインのアイデアを求められることも多くあります。
さらにHTMLコーディングやプログラムなどの知識、新しく登場する多くのデバイスやプラットフォームに対応できるように、最新のトレンドをキャッチできるアンテナを常に張りめぐらせておける人がWebデザイナーに向いているでしょう。
だからこそいつも新しいものを追いかけられるエネルギーが大切です。
本やインターネットで学んだり、セミナーやコミュニティに参加するなど、常に好奇心を持ちつづけ「最新」に触れておくことがWebデザイナーとしての基本です。
Webデザイナーに近道はない
「Webデザイナーって意外と地道、一歩ずつ成長していく仕事なんだな」と思われた方も多いのではないでしょうか。
中には驚くような個性を持ったクリエイターもいますが、それはほんのごく一部です。
Webデザイナーと呼ばれる人たちのほとんどは、Webディレクターやエンジニアといったチームメンバー、そしてクライアントと話し合いを重ねながら、デザインという作業を毎日続ける仕事人です。
みんなが思いつかないようなアイデアやデザインセンスは大切ですが、Webデザイナーは商品を魅力的に見せたり、企業のメッセージを正しく伝えることが仕事であり、奇抜な表現を追求するアーティストではありません。
Webデザイナーは選ばれた人だけが就くことができる特別な仕事ではなく、地道にコツコツ努力しそれが結果につながるひとつの「職業」であり、誰もがWebデザイナーになることができます。
まとめ
もちろん、ここに書いた適性は絶対なくてはあらないものではなく、あくまでも「持っているとより有利で選択肢が広がる」といったものです。
ここで伝えた「最新に触れておく」だとか「努力」といったものは、あなたが興味ある分野だと気づかないうちにやっていることだと思います。
なのでそこまでハードルの高いことでもないと思うので、Webデザイナーを目指しているあなたならきっと大丈夫です。
Webデザイナーに向いている特徴をまとめておきます。
・Webデザイナーに興味ある人
・新しいものが好き（好奇心旺盛）な人
・好きなものをずっと追いかけられるエネルギーを持っている人
・地道にコツコツ努力できる人
現在、プログラミング初心者の方限定にたった数日でHTML・CSSを攻略したい人を募集しています。
＊ただし本気で取り組む方のみ
詳しくはこちらの記事をご覧ください。
これで分かる！CSS Flexboxの仕組みを詳しく解説
こんにちは、ゆうきです。
前回はCSS Flexboxのコンテナに使用できるアイテムプロパティについて徹底解説しました。
そこで今回はCSS Flexboxのアイテム単体で使用できるプロパティを解説していきます。
- アイテムに使用できるプロパティ一覧
- 並び順｜oder
- 伸び率｜flex-grow
- 縮み率｜flex-shrink
- ベースの幅｜flex-basis
- 伸び率、縮み率、ベースの幅を一括指定｜flex
- 垂直方向の位置｜align-self
- flexboxを使う時の注意点
- まとめ
アイテムに使用できるプロパティ一覧
アイテム（子要素、f-item）に使用できるプロパティをご説明していきます。
アイテムに使用できるプロパティは下記の通りです。
order
アイテムの並び順を指定
flex-grow
アイテムの伸び率を指定
flex-shrink
アイテムの縮み率を指定
flex-basis
アイテムのベースの幅を指定
アイテムの伸び率、縮み率、ベースの幅を一括指定
align-self
アイテムの垂直方向の位置を指定
並び順｜oder
アイテムの１つ１つにorderを指定すると、HTMLの記述順に関わらず要素の並び順を指定することできます。
orderでは次のように値を指定します。
orderのデフォルト値は0で、マイナスを含む数値を指定することができます。
伸び率｜flex-grow
flex-growはアイテムのサイズ（伸び率、大きさ）を指定するプロパティです。
flex-growでは、下記のように値を指定します。
flex-growのデフォルト値は0で、数値を指定することが可能です。しかし、マイナスの値は指定できません。
縮み率｜flex-shrink
flex-growとは逆で、アイテムの縮み率、小ささを指定するプロパティです。
flex-shrinkでは、下記のように値を指定します。
flex-shrinkのデフォルト値は0です。
ベースの幅｜flex-basis
flex-basisは、アイテムの基本幅を指定するプロパティです。
flex-basisでは、下記のように値を指定します。
flex-basisの初期値はautoです。
伸び率、縮み率、ベースの幅を一括指定｜flex
flexは、flex-grow、flex-shrink、flex-basisの３つの値をまとめて指定するプロパティです。
上記の３つのプロパティをそれぞれ指定するのではなく、flexを使ってまとめて指定する方法が推奨されています。
flexでは、下記のように値を指定します。
それぞれの値が影響して表示が変化するので、値を変えてみてどのような変化が生まれるのか慣れていくことで使い方を覚えられると思います。
垂直方向の位置｜align-self
align-selfは、アイテムの垂直方向の位置を指定するプロパティです。
コンテナに余白がなければ、どれを指定しても表示は変わりません。
つい使ってしまいがちなvertical-alignは使えないので間違えないようにしましょう。
align-contentでは、下記の値を指定することができます。
auto（デフォルト）
親要素のalign-itemsの値を使用
flex-start
アイテムを上揃えで配置
flex-end
アイテムを下揃えで配置
center
アイテムを中央揃えで配置
baseline
アイテムをベースラインに合わせて配置
stretch
アイテムを上下の余白を埋めるように配置
親要素でも、align-itemsを使って垂直方向の位置を指定することができますが、子要素にalign-selfが指定されていた場合はこちらが優先されます。
下記のように値を指定します。
flexboxを使う時の注意点
最後にFlexboxを使う時の注意点をご紹介しておきます。
vertical-alignは使えない
垂直方向の位置を指定するvertical-alignですが、Flexboxでは使用することができません。
すべてのアイテムに対して垂直方向の位置を指定する場合はFlexコンテナにalign-itemsを、個々のアイテム毎に垂直方向の位置を指定する場合はFlexアイテムにalign-selfプロパティを指定して設定するようにしましょう。
バージョンが古いブラウザだと動作しない可能性
現在では、主要なブラウザはすでにFlexboxに対応しており、基本的にベンダープレフィックスを付けなくても正常に動作させる事が可能です。
しかし、一部の古いバージョンのブラウザでは正しく表示されないため、それらのブラウザを推奨環境に含める場合はベンダープレフィックスが必要となります。
まとめ
これでFlexboxの解説は終わりです。
どうでしたでしょうか？
Flexboxは慣れるまで少し苦労するとはいえ、意外にそこまで難しくはないんです。
Flexboxを素早く使い慣れる最善の方法としては、
Step1 このFlexboxの記事を読んで理解する
Step2 僕が出したプロパティの例をまねて自分でコーディングしてみる
Step3 Flexboxを使って自分なりにコーディングする
です。
このStep通りに実践してみてください。
HTML「id」と「class」の違いについて徹底解説
こんにちは、ゆうきです。
今回は、HTML/CSSをコーディングする際に重要となる「id属性」と「class属性」について解説します。
id属性とclass属性は、どちらもHTMLのタグに名前をつける役割を担います。class属性は、１つのページ内で1だけ利用できるのに対して、id属性は何度でも利用できるなど、両者は様々な点で役割が微妙に異なります。
このページでは、class/idの違いと使い方を解説していきます。
HTML/CSS初心者でも知らないと恥ずかしい内容ばかりなので、最後までご覧ください。
id・classをつける意味とは
id属性/class属性は、どちらもHTMLのタグに名前を付与する役割を持ちます。
名前を付与することで、単なるdivタグを「class name」「id name」で指定できるようになります。
すると、命令した部分だけにCSSを適用できるようになりデザインの幅を広げることが可能になるのです。
idとclassの違い・使い分け方
似ているようで異なるid属性とclass属性の違いは、
- id：ひとつのidはページ内で１度しか使えない。また、1要素に複数のidはつけられない。
- class：ひとつのページ内でclassをいくつでも使える。また、1要素に複数のclassをつけていい。
点にあります。
これを分かりやすいように学校に例えて説明すると、
class属性は学級名（1年4組・・・）、
id属性は生徒名（山田花子・・・）というようになります。
1年4組（class属性）存在する生徒は複数人いるのに対して、山田太郎（id属性）は基本的に１人です。
そのため、classは複数回利用でき、idは基本的に１回限りの利用ということが言えるのです。
タグに名称を付ける場合、それがそのページ内で唯一の存在であればid属性を用いて命名するのに対して、ある程度大まかなまとまりとしてとらえるのであれば、class属性を用いて命名する、と理解しておきましょう。
class属性よりもid属性が優先される
1つのタグにclass属性とid属性、両方の属性を指定した場合は、id属性が優先されます。
CSSの基本思想としては、idタグのように範囲が狭い属性ほど優先度が高くなるためおぼいておくと便利です。
まとめ
今回の記事でのポイントとしては、
- id と classの最大の違いは、ひとつのページで使える回数とひとつの要素に付与できる数。
- id は一意のもので、ひとつのページ上に同じidは複数使えない。また、ひとつの要素にidはひとつしかつけられない。
- classの使用数に制限はない。同じページ上に複数回使われても大丈夫。また、ひとつの要素に複数つけることも可能。
- idは一意的の目印にするだけ、CSSによるデザイン設定はclass、などと使い分けると管理・メンテナンスが楽でオススメ。
です。
現在、プログラミング初心者の方限定にたった数日でHTML・CSSを攻略したい人を募集しています。
＊ただし本気で取り組む方のみ
詳しくはこちらの記事をご覧ください。
Web制作でフリーランスで稼ぐために今からやるべきこと！
こんにちは、ゆうきです
Web制作フリーランスというと、未経験でも比較的簡単になれて稼げるフリーランスというイメージがありますよね
実際、
・プログラミングスクールのWebデザイナーコース
・Progate
・ドットインストール
を履修して「フリーランスになりたい」と言っている人も多く見かけます
「なりたい」とは思うけれど、Web制作フリーランスでどれくらい稼げるのかやどうやって案件をとるのかはスクールでは教わらないので、不安に感じたり、なかなか行動に移せないという人もいるのではないでしょうか
この記事ではWeb制作フリーランスになる前にやっておくべきことについて説明します
Web制作でフリーランスになるなら平均的な会社員の倍は稼ぎたい
Web制作やWebデザインをメインにしてフリーランスになることは可能です
Web系フリーランスというと「稼げて自由でキラキラしている」というイメージがあります
しかし、本職でWeb制作フリーランスをしている人の年収は、300万円程度から800万円程度です
考えているよりも少なく感じたかもしれませんね
Web制作フリーランスの年収は、受注している案件やどんな制作をしているかによってピンからキリまであるのです
もし、あなたが会社員で「これからWeb制作でフリーランスになろう」と考えているなら、今の生活水準を維持するために会社員時代の倍は稼げるようになる必要があります
フリーランスになると会社員時代は、勤め先と折半だった社会保険料や経費で落とせたアレコレを自分で支払う必要があるからです
貯金や休業保険、将来への投資、余暇に使うお金などを考えると会社員時代と同程度の稼ぎでは心許なく感じるでしょう
Web制作でフリーランスになりたい人がやっておくべきこと
Web制作でフリーランスになりたい人は、仕事を受ける窓口を複数作っておいた方がいいでしょう
例えば、ブログやホームページ、Twitterなどで情報発信をすることで、あなたの実績や人柄をPRすることができます
特に、実績や仕事単価についてまとめたポートフォリオは必ず作っておきましょう
ポートフォリオを作ることでこんなことをアピールできます
- 過去の実績
- 予算感や制作進行の目安
- 問い合わせ先
また、フリーランスになったからこそ、スキルアップのための時間を意識的に作りましょう
好きが高じて気がついたらフリーランスになっていた人と違って、何かしらの事情があってフリーランスになった人は、ある程度稼げるようになった段階でスキルアップの時間を省いてしまいがちです
競争が激しいのは、どの業界のフリーランスも同じです
スキルアップに対する熱情だけは冷まさないようにしましょう
例えば、Webデザイン、コーディングだけでは案件数が少ないので、デザインとコーディングを一括で受けられるようにしておくか、デザイナーさんとタッグを組めるように人脈を増やしておくのもいいでしょう
まとめ
フリーランスになって自由と安定した収入を得たいなら、案件獲得のために使えるツールは多いにこしたことはありません
知名度が低く、実績が少ないうちは、クラウドソージングサイトや知人からの紹介で案件を獲得した方がいいです
しかし、単価の低い案件を数多くこなしたところで自由な生活は手に入りません
実績がある程度増えたら、案件の単価を上げていきましょう
そして、安定した収入を得るなら選択肢は多く持っておくようにしましょう
現在、プログラミング初心者の方限定にたった数日でHTML・CSSを攻略したい人を募集しています。
＊ただし本気で取り組む方のみ
詳しくはこちらの記事をご覧ください。
【超初心者向け！】CSSとは？？
こんにちは！ゆうきです！！
・CSSって何？
・CSSを勉強しておくとどう役立つの？
こんな感じの超初心者向けに「CSSとは何か」について解説します。
これからWebデザインを勉強したいという方や、今さらCSSが何かなんて人に聞けないよという方はぜひご参照ください。
基本中の基本！CSS（スタイルシート）とは
CSSは“Cascading Style Sheets” の略でスタイルシートとも呼ばれます。
HTMLは文字やフレームでサイトの骨組みを作るものでしたが、CSSはその骨組みをデザインし、サイトの見栄えを整える役割を担っています。
なので、あなたが普段見ているWebサイトはすべてHTMLとCSSの組み合わせで構築されいることになります。
WEBサイト = HTML（骨組み） + CSS（デザイン）
CSSが実装されたサイト
実際にこのブログをHTMLのみの見え方とCSSが実装された見え方で見比べて見たいと思います。
・HTMLのみのサイト
・HTML +CSSが実装されたサイト
CSSファイルの書き方【ファイル準備から実装まで】
・CSSファイルを準備する
なんでもいいのでテキストエディタを開き、ファイル名を[style.css]で保存しておきます。
これでファイルの準備は完了です。
・CSSを書く
ファイルの準備ができたら実際にCSSを書いてみましょう。
前述の通り、CSSは【HTMLで構成されたフレームを装飾するもの】なので、まずは装飾するためのHTMLファイルが必要です。
このサンプルHTMLをテキストエディタにコピペ
練習用のHTMLを用意したので下記をコピーし、テキストエディタに貼り付けます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<title>スタイルシート練習</title>
<body>
<div class="main">
<span class="text">CSSの練習だよ</span>
</div>
<body>
</html>
CSSを反映したい場合、HTMLファイルの<head>タグの中に、次の一文を記載してください。
<link rel=”stylesheet” href=”style.css”>
これで「このHTMLファイルを読み込むときにはstylesheetというファイル内に記載されたCSSの内容を反映してください」というリクエストを送ることができます。
HTMLだけの見え方を確認
HTMLファイルができたら、まずはそのままの状態を確認してみます。
コピペしたファイルの拡張子を[.html]にして保存し開いてみるとブラウザ上で下記のように見えるはずです。
これをCSSでデザインしていきましょう。
今回は文字の色と背景色を変更する方法です。
CSSで装飾
先ほど作った[stylesheet.css]に、次のテキストをコピペし保存します。
.main{
width: 100%;
height: 200%;
background-color: black:
text-align: center;
}
.text{
font-size: 26px:
color: #fff:
}
.mainの部分は背景のカスタマイズ、.textの部分はテキストの部分のカスタマイズです。
.mainでは背景の色を黒にするための記載、.textは文字の大きさを26ポイントにして文字色を白にカスタマイズするための記載です。
・ファイルをサーバーにアップする
以上でHTMLファイルとCSSファイルの準備ができたので、サーバーにアップロードしCSSが反映した状態のページを表示させてみましょう。
2つのファイルはサーバー上の同じ階層に保存してください。
以上の作業を終えたら改めて先ほどのHTMLを表示させてみます。するとページのデザインはこのように変更されて表示されます。
まとめ
【超基本！】HTMLとは？？
こんにちは、ゆうきです。
突然ですが、人間が生きていくのに一番大事なものは何だと思いますか？？
これに対する答えは「血液」や「酸素」など人それぞれだと思いますが、僕は心臓だと思います。（血液や酸素も心臓と同じくらい大事ってねw）
ではさっそく本題に入っていきます。
Webを作成するのにHTMLは必要不可欠です。なぜなら、HTMLはWeb上に表示させたい文字や、構造を作れるからです。
Webを作るのにHTMLがどれだけ重要なのかというと、人間が生きていく上でとても重要な「心臓」であったり「血液」や「酸素」くらい大事なんです。
今回はそんなWebを作成したいが、HTMLの書き方が分からない人のために、基本的な書き方について説明していきます。
HTMLの書き方【基盤】
まず、HTMLを書く際の基盤について説明していきます。
実際にHTMLの基本構造を書くと、下図のような構造になっています。
- <!DOCTYPE html> は「今からHTMLを使うよ！」という宣言をするコードです。必ず一番初めに書かないといけないコードです。
- <html>~</html> はHTML文書の範囲を示します。
- <head>~</head> はページのヘッダー情報の範囲を示します。
- <title>~</title> はページのタイトルを示す範囲を指定します。また、<head>タグ内で使用します。
- <body>~</body> はブラウザ（Webに表示させる本文的なところ）に表示する内容を記述する範囲を指定します。
- <p>~</p> は段落を示します。
これがHTMLで書く際の基盤となっていきます。
HTMLのタグの書き方
タグを書く際はまず「< >」を書き、その間に性格を指定する要素名を入れ、「<要素名> <要素名>」と、2つ並べます。
それから、2つ目の「< >」に「/」を加え、「<要素名> </要素名>」という形にします。このとき「<要素名>」を開始タグ、「</要素名>」を終了タグといいます。
そして、文字列は開始タグと終了タグのあいだに書くようにしてください。
例えば、文書の中に「HTMLの書き方」という見出しを作りたいときは、「hタグ（h=headerの意味）」を使って次のように書くことができます。
要素とは
HTML要素には、現在100を超える種類があります。代表的なものをいくつか紹介しましょう。
- h1 - 見出し（h1,h2,h3,h4...と、数が大きくなるにつれて見出しは小さくなります。）
- a - リンク（表示させたい画像や動画のURLを書くことによって表示させることができる）
- ul,li - 箇条書き
HTMLを書く上で気をつけること
HTMLを書く際は全角文字がNGなので、コードは必ず半角英数字で書く必要があります。
同じく、全角スペースもエラーの原因となるため、コードを書く際は気をつけましょう！
まとめ
HTMLの超基本的な書き方について説明しましたが、実際にあなたがコードを書いてWebを制作してみないとHTMLを習得することは出来ません。
でも、どうやって自分一人でWebを制作していけばいいのか分からないですよね。
そこで！
ちょうど現在、プログラミング初心者の方限定でたった2週間でHTML・CSSを習得したい人を募集しています。
＊ただし本気で取り組む方のみ
詳しくはこちらの記事をご覧ください。
【CSS positionプロパティ】absoluteとrelativeの違いを分かりやすく解説
こんにちは、ゆうきです。
CSSを記述するときにpositionプロパティを利用して、要素の位置をずらすことがあります。
そのときに出てくるのが「absolute（絶対位置）」「relative（相対位置）」です。
今回は実際に配置した例を見て、「absolute」と「relative」の違いについて説明していきます。
positionプロパティとは
まずは、「absolute」「relative」を使ううえで欠かせないpositionプロパティについても説明します。
positionプロパティは、「要素を配置する基準」を指定するためのプロパティです。「absolute」と「relative」はこの「基準」の場所を区別するためにあるということを理解していると、この先の説明もわかりやすく感じると思います。
absoluteとは
「absolute」は移動するときの基準がウィンドウ、または親要素になります。
つまり複数の要素がある場合でも「absolute」で指定すると、他の要素を無視して左上（top:0、left:0の位置）から移動するということです。
実際に配置した例を見ていきましょう。200px×100pxのboxを３つ並べました。
次に、黄色のbox2に{ position: absolute; top:150px; left:100px } を指定します。
すると、box2はウィンドウの左上を基準（起点）にして、上から150px、左から100pxの位置に移動しました。
さらに、absolute を指定した要素は高さがなくなり、浮いたような状態になるため、box3はbox2を無視して位置を詰めています。
relativeとは
relative は移動するときの基準が元いた位置になります。
つまりpositionを記述する前に配置されていた場所から移動するということです。
box2に、{ position: relative; top:150px; left:100px; } を指定した例を見ていきましょう。
box2は自分が元々いた位置を基準にして、上から150px、左から100pxの位置に移動しています。
また、absoluteとは違い、移動させた要素の高さが残るため、box3は位置を詰めずそのままの位置に表示されています。
absoluteとrelativeの使い方
実際にWebサイトを制作すると、親要素を基準にして子要素を移動させたいという場合が多いです。
しかし要素に空白を残したくないからと、子要素にだけ「absolute」を記述してしまうと、思ったように表示することができません。
これは、親要素ではなく画面左上を起点に子要素が移動してしまっているからです。
親要素を基準にするためには、親要素に「position:relative;」を記述します。
こうすることで、子要素が親要素を基準に移動することができます。
まとめ
「relative」と「absolute」は、最初は混乱するかもしれませんが、少しでも理解しておくと、実際にpositionを使ってレイアウトするときやソースコードを参考にしたときにすんなりと記述しやすくなります。
ぜひ覚えておきましょう！
現在、プログラミング初心者の方限定にたった数日でHTML・CSSを攻略したい人を募集しています。
＊ただし本気で取り組む方のみ
詳しくはこちらの記事をご覧ください。
