WEBデザインの能力を試してみよう！「ウェブデザイン技能検定」

以前、谷宜樹がWEBデザインに関係する資格・検定についてお話ししました。なかでも「ウェブデザイン技能検定」は、WEBデザイナーを目指す人がまず受検するべき検定だと思います。国家資格であり、就職や起業にも役立つでしょう。今回は、この検定についてもっと詳しく谷宜樹が解説していきます。■「ウェブデザイン技能検定」とは？WEBサイトが作成できる知識、技能を認定するものです。WEB業界では初めての国家資格であり、谷宜樹は若手デザイナーにはまずこれを受検することをおすすめしています。スクールで学んできた人は、講師から紹介されることがあるかもしれませんね。独学で勉強していた人も、自分の力を試すために受検してみましょう。■受検料は？1級から3級までウェブデザイン技能検定は、1級から3級まであります。各級とも学科試験と実技...WEBデザインの能力を試してみよう！「ウェブデザイン技能検定」

テンプレートを使って作ってみよう！WEBデザインが効率よく学べる

WEBデザインを作るのに必要なのは、ページの構成「ワイヤーフレーム」と画像やボタンなどのパーツ、文章、そしてコーディングする技術です。どんなに素晴らしいデザインを思いついても、HTMLやCSSの知識が0ではWEBサイトを公開することはできません。しかし、実際はコーディングの知識なしでサイトを制作、運営している人はいますよね。そういう人はどうやってWEBページを作っているのでしょうか。今回は、谷宜樹がテンプレートを使ってWEBデザインしていく方法を紹介します。■WEBサイト制作アプリを使ってみよう何もない真っ白なページに、線を引いたり画像を貼り付けたりしてWEBサイトを作っていくのは大変です。「ワイヤーフレーム通りに作っていけば良い」といっても、どうやって線を引くのか、このページにぴったりの背景はどこから探...テンプレートを使って作ってみよう！WEBデザインが効率よく学べる

有料サービスが無料になった今こそ！「Chot.design」で勉強しよう

WEBデザインは、専門の学校に通って勉強するほか、テキストなどを使って家で学ぶこともできます。また、とにかく実践あるのみで独学をしている人もいるでしょう。しかし、専門家の解説なくして本当の技術を身に付けることはできないと谷宜樹は思います。学校に通うにしろ、家で勉強するにしろ、WEBデザインの専門的な知識を学ぶにはツールを使った操作の練習だけでは不十分です。もし家で勉強するなら、学習サイトを利用するのも良いでしょう。今回は、谷宜樹が無料で使えるWEBデザインの学習サイトを紹介します。■有料サービスが無料に！？今ならお得に勉強できるWEBデザインの学習サイト「Chot.design（ちょっとデザイン）」は、これまで有料会員サービスでした。このサイトで勉強するには有料の会員登録が必要であり、ログインしないとカリ...有料サービスが無料になった今こそ！「Chot.design」で勉強しよう

本当に使えるのはどれ？無料ツールおすすめ5選

前回は、無料のツールの選び方について解説しました。WEBデザインは有料のIllustratorやPhotoshopだけでなく、無料で提供されているツールを使っても作ることができます。まずは無料ツールで試してみて、もっと効率よく本格的なデザインをしたいと思ったら有料ツールにステップアップしても良いでしょう。今回は、谷宜樹がおすすめする無料ツールを紹介します。■ロゴ・バナーを制作したいなら「GIMP」1996年から提供スタートした老舗ソフト「GIMP」は画像作成におすすめです。Photoshopの代用として挙げられるくらい有名で、本家と同じような使用感があります。日本語にも対応しているので、初心者も使いやすいでしょう。WEBデザインで必要な基本的機能が備わっていることに加え、プラグインなど機能を拡張できるのも...本当に使えるのはどれ？無料ツールおすすめ5選

無料ツールは本当にお得？正しくツールを選ぶ方法とは

WEBデザインを作るためのツールとして、最も有名なのは「Photoshop」と「Illustrator」です。この2つはサブスクリプション形式のツールであり、月額か年額の料金が掛かります。操作方法もやや難しいため、「せっかく高い料金を払ったのに使えなかった・・・」ということもあるでしょう。無料で使えるツールなら、気軽にWEBデザインの勉強ができますね。今回は、谷宜樹が無料で使えるWEBデザインツールの選び方について解説しましょう。■PhotoshopとIllustratorを無料で使う方法PhotoshopとIllustratorを試してみたい場合は、7日間の無料体験版をダウンロードしてみましょう。短い期間ですが、有料の製品版と同じ機能が使えます。Adobe社の公式サイトからダウンロードしてくださいね。■...無料ツールは本当にお得？正しくツールを選ぶ方法とは

Illustratorの使い方を見てみよう！無料体験もおすすめ

前回は、谷宜樹が画像編集ソフト「Photoshop」の使い方を簡単に解説しました。基本的な機能のほんの一部でしたが、いかがでしたか？ソフトを使ったことのない人でも、感覚的に操作できるところがあるでしょう。しかし、マニュアルを見ないと分からないところも多いと思います。詳しい内容はPhotoshopを提供するAdobe社の公式サイトをご確認ください。今回は、同じAdobe社から出ている描画ツール「Illustrator」の機能についてお話ししていきましょう。■図形を使ってみよう！組み合わせても面白いIllustratorには、丸や四角形、星型などの図形から選んで描くことができます。また、違う形の図形を組み合わせたり、図形から一部分をくり抜いたりしても良いでしょう。単純な図形しか使っていなくても、組み合わせ次第...Illustratorの使い方を見てみよう！無料体験もおすすめ

Photoshopで編集してみよう！基本的な機能をご紹介

画像編集ソフト「Photoshop（フォトショップ）」は、谷宜樹もWEBデザインでよく使うツールです。写真データやイラストを簡単に編集して、WEBページに使う画像を作ることができます。以前、Photoshopではどんなことができるかお話ししましたよね。今回は具体的にどのように編集していくのか、Photoshopにある機能の一部について紹介していきたいと思います。詳しい操作方法については、Photoshopの公式サイトからチュートリアルを見てくださいね。■画像を拡大・縮小してみよう！トリミングもできる写真データが大きすぎる、小さすぎることがありますよね。そのまま貼り付けても使えない場合は、サイズ変更をします。画像サイズ設定から、幅や高さの指定、解像度の指定が可能です。数値を変更したら、プレビューも確認しまし...Photoshopで編集してみよう！基本的な機能をご紹介

WEBデザイナーに必要な資格とは？無資格でも仕事ができる？

WEBデザイナーになるためには、どんな資格が必要でしょうか。実は、WEBデザインをするのに必ず持っていなくてはならない資格はありません。独学で学んだ人でも、未経験者でもWEBデザイナーになることは可能です。ただし、資格を持っていた方がメリットが大きいと谷宜樹は思います。今回は、WEBデザイナーになりたい人が持っていた方が良い資格について紹介しましょう。■就職活動で有利に！採用試験ではスキルを見られるまずWEBデザインの資格を持っていると、どのようなメリットがあるか考えてみましょう。WEBデザイナーを募集する企業にとって、その人が持つスキルが気になるところです。もちろん「やってみたい」という意欲も大事ですが、即戦力が欲しい企業は実力を重要視するでしょう。WEBデザイナーに応募するにあたり、「全く勉強していま...WEBデザイナーに必要な資格とは？無資格でも仕事ができる？

WEBデザインと「SDGs」の関係とは？WEBデザインでできること

最近テレビで「SDGs」が盛んに取り上げられていますよね。報道番組だけでなく、バラエティでもSDGsを意識した内容になっていることが多くなりました。例えばクイズ番組では、SDGsについてどんな問題があるのか、どのような行動がSDGsにつながるのかが出題されています。谷宜樹が属しているWEBデザイン業界でも、SDGsについて考えるべきだと提言され始めました。今回は、WEBデザインにおけるSDGsのあり方について解説していきましょう。■「SDGs」とは？世界の目標「今更人に聞けない・・・」と分かっているふりをしている人がいるかもしれませんが、「SDGs」とは何でしょうか。これは「SustainableDevelopmentGoals（持続可能な開発目標）」のことをいいます。持続可能な、を英語で言うと「Sust...WEBデザインと「SDGs」の関係とは？WEBデザインでできること

「Illustrator」で何ができるの？Photoshopとの違いは？

前回はプロのWEBデザイナーも良く使っている画像編集ソフト「Photoshop」について紹介しました。WEBデザインを作る時に便利なツールは、他にも様々なものがあります。Photoshopと同じくらいメジャーなものとして、「Illustrator（イラストレーター）」が挙げられるでしょう。今回は谷宜樹が、「Illustrator」がどんなツールなのか解説します。■「Illustrator」って？Illustratorは、ロゴや画像、アイコンなどを作るのに使われるツールです。ポスターなどの印刷物をデザインする時に利用されることも多いでしょう。これに対し、主に写真などの画像を編集するために使われるのがPhotoshopです。一からデザインを作り出すのがIllustrator、用意した写真や画像を元にデザインを...「Illustrator」で何ができるの？Photoshopとの違いは？

これさえあればOK！WEBデザインには「Photoshop」を使おう

WEBデザインに使うソフトは、様々なものが登場しています。しかし谷宜樹は、プロでもアマチュアでもとりあえず「Photoshop（フォトショップ）」から始めてみるべきだと考えます。今回は、WEBデザイナーも使っている代表的なデザインソフトPhotoshopについて解説していきましょう。■Photoshopでできることは？Photoshopは、写真の修正や補正、合成や切り抜きもできる画像編集ソフトです。制作のプロであるクリエイターやデザイナーから、趣味で写真を撮る人まで多くの人に愛されています。このソフトは、人物の肌をキレイに見せる、余計な被写体を削除する、または別の写真と合成させるということも可能です。さらに、被写体の色を変える、写真全体の色味やテクスチャを変えることもできます。そのほか、写真を使わずにCG（コン...これさえあればOK！WEBデザインには「Photoshop」を使おう

「UIデザイン」「UXデザイン」って何？より専門性の高い働き方も

WEBデザイナーを目指す人は、「UIデザイン」や「UXデザイン」についても知っておくべきだと谷宜樹は思います。WEBデザイナーと業務内容が同じになることもありますが、UIデザイナー・UXデザイナーにしかできない仕事もあるでしょう。人によってはWEBデザインよりも、UI・UXデザインの方が向いている場合もあります。今回は、UIデザイン、UXデザインについて学び、自分の適性と照らし合わせてみましょう。■「UI」とは？パソコンやスマホなどの機器と、それを使うユーザーの関係からデザインを考えていくことを「UserInterface」といいます。これを略したのが、「UI」です。見やすく分かりやすいサイトにしていくのがWEBデザインであるならば、UIはさらにユーザーの操作性を重視するものです。例えば、画像やボタンなどがUI...「UIデザイン」「UXデザイン」って何？より専門性の高い働き方も

ワイヤーフレームを作ってみよう！設計図をイメージ

前回は「ワイヤーフレーム」とは何か、について谷宜樹が解説しました。今回は、具体的にどうやって作成していくかお話ししていきます。作ってみたいWEBデザインがある人は、ぜひ一緒にワイヤーフレームを作成してみてくださいね。■「サイトマップ」を作ろう！全体像をイメージいきなりページ内のテキスト・画像の位置を決めようとしても上手くいきません。まずは、どのようなものが必要になるかイメージしてみましょう。例えば、企業説明のページを作る場合は、何が必要でしょうか。企業のロゴ、本社の画像、事業内容が分かるテキスト・・・他にもたくさんの要素があります。ホームページであれば、トップページの他に複数の子ページを作ることが多いですよね。どのページに何を表示するか、全体像を把握する「サイトマップ」を作りましょう。サイトマップは、エクセルで...ワイヤーフレームを作ってみよう！設計図をイメージ

「ワイヤーフレーム」って何だろう？デザインカンプに必要不可欠

WEBデザインを作る上でとても大事なのは、しっかりと準備をしておくことです。「こういうものを作ろう」とイメージしていても、いざphotoshopを開くと全く手が動かない・・・ということはよくあります。それは、WEBデザインの設計図がないから。どんなベテランでも、設計図なしに完璧なWEBデザインは作れません。今回は、谷宜樹がWEBデザインの設計図「ワイヤーフレーム」について解説していきましょう。■「ワイヤーフレーム」って何？家を新築する時やマンションの部屋を探す時、必ずと言っていいほど目にするのが間取り図ですよね。どこに部屋があって、どこにトイレやお風呂があるのか、それぞれどのくらいの大きさなのか知ることができるのが間取り図です。WEBデザインにおいても、まずどこに何をレイアウトするのかを明確にしておきます。ホー...「ワイヤーフレーム」って何だろう？デザインカンプに必要不可欠

デザインカンプを作ってみよう②完成編

前回はデザインカンプの下書き段階までを、谷宜樹が解説しました。今回は、作成した下書きをもとにデザインカンプを仕上げていきましょう。クライアントがいる場合は、サイズや配色などの指定がないかあらかじめ確認しておいてください。勉強中の方は、ワイヤーフレーム通りになっているか見比べ、参考にするサイトから配色のイメージをもらっておくと良いですね。気になることがあれば、下書きの段階で解決しておくことが大切です。コーディングできるかどうかも確認したら、次に進みましょう。■下書きを書き写してみようワイヤーフレームや下書き、参考にするサイトなどを準備して、本番用シートに書き写していきます。下書きをphotoshopで作成した場合は、書き写す必要はありません。紙に下書きした場合や別のソフトを使って下書きした場合は、そのままの内容で...デザインカンプを作ってみよう②完成編

デザインカンプを作ってみよう！①下書き編

前回は、WEBデザインをする時に重要な「デザインカンプ」について谷宜樹がお話ししました。今回はデザインカンプの作り方について、まずは下書きの段階までを詳しく見ていきます。手順に沿って、作成するコツなどもお話していきますので、ぜひ一緒に作ってみてくださいね。■どのような流れで作成するかイメージしてみようデザインカンプは、一般的に次のような手順で作成されます。勉強中の方は、自分にどんな技術が必要になるか考えてみましょう。①「ワイヤーフレーム」を作る②参考にするサイトを探す③デザインカンプの下書き④ページの幅と高さを決める⑤下書きを書き写す⑥大まかな配色を決める⑦「ガイド線」を引く⑧全体のバランスを確認■「ワイヤーフレーム」を作成しようWEBページを作る際は、まずレイアウトを含めた「ワイヤーフレーム」という設計図を作...デザインカンプを作ってみよう！①下書き編

「デザインカンプ」とは？完成見本でクライアントとイメージを共有

WEBデザインをクライアントに提案する時、まず見本を作ってプレゼンします。この見本のことを、WEBデザイン業界では「デザインカンプ」と呼んでいます。今回は、デザインカンプがどのように使われているか谷宜樹が解説していきましょう。■デザインカンプの役割とは？完成見本としてクライアントに披露するのが、デザインカンプです。企画書よりも具体的にイメージが伝わり、完成品の内容とかなり近いものになります。デザイナーとクライアントで完成形のイメージを共有し、「こんなはずではなかった」ということを未然に防ぐために作られています。デザインカンプの時点でイメージの共有をしておき、クライアントが納得した上でHTML・CSSによるコーディング作業が開始されるのが一般的です。コーディングの前なら修正も簡単なので、デザインカンプをしっかり確...「デザインカンプ」とは？完成見本でクライアントとイメージを共有

WEBデザインの実例を調べたい！おすすめの国内サイト

前回は、谷宜樹が参考にしたいと思ったWEBデザインをいくつか紹介しました。WEBデザインの基礎知識を学ぶのと同時に、実際にどのようなWEBデザインがあるのか見ておくのも勉強になります。今回は、谷宜樹が時々チェックしている国内ギャラリーサイトを紹介しましょう。ここでは様々なWEBデザインの実例を見ることができます。なかでもシンプルなものは、初心者のみなさんの参考になると思うので、ぜひチェックしてみてください。■デザインの検索がしやすい！「SANKOU！」シンプルなデザインを集めたギャラリーサイトです。更新の頻度が高く、最新のトレンドを知りたい時にもおすすめです。ブランドのサイトや求人広告、体験教室の広告まで様々なタイプのWEBデザインを検索できます。■色からも検索できる！「イケサイ」デザイン性の高いWEBサイトを...WEBデザインの実例を調べたい！おすすめの国内サイト

WEBデザインは実例から学ぼう！トップページから伝わる企業のメッセージ

これまでWEBデザインの仕事内容や、WEBデザインをする上で必要になる基礎知識などを谷宜樹が解説してきました。しかし、知識さえ身に付ければ今日からWEBデザイナーとしてやっていけるというわけではありません。すでに多くのデザイナーが利用している理論やデザインを使っただけでは、クライアントに選ばれるデザイナーにはなれないのです。自分にしかできないデザインができることも、WEBデザイナーの強みです。今回は、谷宜樹が「上手い！」と思ったWEBデザインの実例を通して、どんなものが魅力的なのか考えていただこうと思います。■一緒にやりたい！話を聞いてみたい！そう思わせる広告とはある会社の求人情報ページは、実際に働いている人の写真が使われていました。若い男性と管理職らしき初老の男性が、にこやかに会話をしています。これを見た人は...WEBデザインは実例から学ぼう！トップページから伝わる企業のメッセージ

行動経済学を利用しよう！「エンダウド・プログレス効果」と「現在志向バイアス」

前回は、行動経済学で定義されている法則の2つを谷宜樹が解説しました。損をしたくないという心理「プロスペクト理論」、イメージを固定化させる効果「アンカリング効果」の2つは、非合理的な行動を導くものとしてWEBデザインに応用されています。今回は、この他にも谷宜樹がWEBデザインによく活用する法則を解説します。■「エンダウド・プログレス効果」とは？人は、ゴールまで順調に進んでいると感じると、モチベーションがアップします。これを「エンダウド・プログレス効果」といい、より達成感を持たせる表現がモチベーションの向上に良い影響を与えると分かっています。この効果を理論づけるものとして、2つのポイントカードを使った実験が有名です。1枚は10ポイント貯めるポイントカードであり、すでに2ポイント獲得しています。もう1枚は8ポイント貯...行動経済学を利用しよう！「エンダウド・プログレス効果」と「現在志向バイアス」