会員登録後、有料プランで広告を非表示に
詳しくはこちら
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」で勉強しよう
前回は、無料のツールの選び方について解説しました。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（フォトショップ）」は、谷宜樹もWEBデザインでよく使うツールです。写真データやイラストを簡単に編集して、WEBページに使う画像を作ることができます。以前、Photoshopではどんなことができるかお話ししましたよね。今回は具体的にどのように編集していくのか、Photoshopにある機能の一部について紹介していきたいと思います。詳しい操作方法については、Photoshopの公式サイトからチュートリアルを見てくださいね。■画像を拡大・縮小してみよう！トリミングもできる写真データが大きすぎる、小さすぎることがありますよね。そのまま貼り付けても使えない場合は、サイズ変更をします。画像サイズ設定から、幅や高さの指定、解像度の指定が可能です。数値を変更したら、プレビューも確認しまし...Photoshopで編集してみよう！基本的な機能をご紹介
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デザインの実例を見ることができます。なかでもシンプルなものは、初心者のみなさんの参考になると思うので、ぜひチェックしてみてください。■デザインの検索がしやすい！「SANKOU！」シンプルなデザインを集めたギャラリーサイトです。更新の頻度が高く、最新のトレンドを知りたい時にもおすすめです。ブランドのサイトや求人広告、体験教室の広告まで様々なタイプのWEBデザインを検索できます。■色からも検索できる！「イケサイ」デザイン性の高いWEBサイトを...WEBデザインの実例を調べたい！おすすめの国内サイト
WEBデザインは実例から学ぼう！トップページから伝わる企業のメッセージ
これまでWEBデザインの仕事内容や、WEBデザインをする上で必要になる基礎知識などを谷宜樹が解説してきました。しかし、知識さえ身に付ければ今日からWEBデザイナーとしてやっていけるというわけではありません。すでに多くのデザイナーが利用している理論やデザインを使っただけでは、クライアントに選ばれるデザイナーにはなれないのです。自分にしかできないデザインができることも、WEBデザイナーの強みです。今回は、谷宜樹が「上手い！」と思ったWEBデザインの実例を通して、どんなものが魅力的なのか考えていただこうと思います。■一緒にやりたい！話を聞いてみたい！そう思わせる広告とはある会社の求人情報ページは、実際に働いている人の写真が使われていました。若い男性と管理職らしき初老の男性が、にこやかに会話をしています。これを見た人は...WEBデザインは実例から学ぼう！トップページから伝わる企業のメッセージ
行動経済学を利用しよう！「エンダウド・プログレス効果」と「現在志向バイアス」
前回は、行動経済学で定義されている法則の2つを谷宜樹が解説しました。損をしたくないという心理「プロスペクト理論」、イメージを固定化させる効果「アンカリング効果」の2つは、非合理的な行動を導くものとしてWEBデザインに応用されています。今回は、この他にも谷宜樹がWEBデザインによく活用する法則を解説します。■「エンダウド・プログレス効果」とは？人は、ゴールまで順調に進んでいると感じると、モチベーションがアップします。これを「エンダウド・プログレス効果」といい、より達成感を持たせる表現がモチベーションの向上に良い影響を与えると分かっています。この効果を理論づけるものとして、2つのポイントカードを使った実験が有名です。1枚は10ポイント貯めるポイントカードであり、すでに2ポイント獲得しています。もう1枚は8ポイント貯...行動経済学を利用しよう！「エンダウド・プログレス効果」と「現在志向バイアス」
WEBサイトに活かしてみよう！「プロスペクト理論」と「アンカリング理論」
前回は、「行動経済学」についての概要を谷宜樹が解説しました。人間の非合理的な行動をWEBデザインに活かすということの意味が分かっていただけたでしょうか。今回は、行動経済学で定義されている法則をいくつかご紹介します。それぞれどんなWEBデザインに活かせるか、谷宜樹と一緒に考えてみましょう。■「プロスペクト理論」を学ぼう行動経済学の中心となる法則に、「プロスペクト理論」というものがあります。これは、与えられた情報ではなく、自分の状況や感情によって期待値を変えてしまうという考え方です。例えば、次のような宝くじがあったとしましょう。①100万円をもらえる確率が80%である②200万円をもらえる確率が40%であるみなさんならどちらの宝くじを買いますか？①はかなりの確率でお金を手に入れられます。②は①の2倍の金額ですが、も...WEBサイトに活かしてみよう！「プロスペクト理論」と「アンカリング理論」
「行動経済学」を学んでWEBデザインに活かす！人間の思考を分析
人間は、経験や知識に基づいた合理的な判断をしようとする生き物です。しかし、そうすることが良いと判断できる明確な根拠がないのに、なんとなくその行動を選んでしまうということもありますよね。これは、非合理的な行動です。WEBサイトで商品を買ってもらうために設置するCTAボタンや宣伝文句は、ユーザーの気持ちを刺激して非合理的な行動を促しているといっても過言ではありません。今回は、人の気持ちを動かして経済活動につなげる「行動経済学」について、谷宜樹が解説していきましょう。■「非合理な行動」って何？みなさんは、次のような行動をしてしまったことはありませんか？①バイトで稼いだ1万円は大切に取っておくけど、パチンコで当たった1万円はすぐに使ってしまった②うな重を食べに行って並・上・特上があったら、いつも上を頼む③健康のためにウ...「行動経済学」を学んでWEBデザインに活かす！人間の思考を分析
前回は、谷宜樹がCTAボタンに添える言葉について解説しました。他にも、CTAボタンの見た目を決めるサイズ・カラー・イラスト・形が重要だとお話しましたね。今回は、この4つの要素について詳しく解説していきたいと思います。■色んなCTAボタンを作ってみよう！CTAボタンが与えるイメージを知るためには、まず自分で様々なサイズ、カラー、形のボタンを作ってみるのが一番です。編集ツールの練習にもなるので、まずは何も考えずに色々作ってみましょう。3～5個作れたら、そのボタンに同じ「ここをクリック」という文字を入力してください。これでそのボタンの見た目だけでどう感じるか調べることができます。じっくりボタンを観察し、自分ならどんな感想を持ったかメモしてみましょう。■CTAボタンのデザインで考えることは？CTAボタンの見た目からどん...CTAボタンが与えるイメージは？効果的なデザインを考えよう
CTAボタンにはどんな言葉を添える？分かりやすく魅力的なボタンとは
CTAボタンのデザインは、見る人に「押してみたい！」と思わせるものにする必要があります。これは初心者の方でも、なんとなく想像できるのではないでしょうか。しかし谷宜樹は、「このボタンを押したらどうなるか」ということが容易に想像できることも重要だと考えています。WEBサイトで、ただ「押してみて」と書かれているボタンをあなたは押すでしょうか。ボタンを押したら料金を請求されるかも、勝手に登録されるかも、と思ったら怖いですよね。CTAボタンは、閲覧者が安心してクリックできるようにするべきです。今回は、意味が分かりやすく、クリックするメリットを感じられるようなCTAボタンのデザインについて、谷宜樹と一緒に勉強していきましょう。■ボタンを押したらどうなる？具体的かつシンプルにWEBサイトにあるCTAボタンを見てみましょう。時...CTAボタンにはどんな言葉を添える？分かりやすく魅力的なボタンとは
前回はCTAを設置する場所をWEBページ全体の構成から考えてみました。ヘッダーやファーストビューに設置すれば、サイトに訪れてすぐコンバージョンへ誘導することになります。最後まで読んでもらえれば、フッターに設置されたCTAも印象的になりますが、途中で離脱される可能性もありますね。どこに置けばいいのか、悩みどころです。今回は、本文の中にCTAを設置する場合のポイントについて谷宜樹と考えてみましょう。■本文の上に入れる？下に入れる？CTAはヘッダーやフッターのような本文の外に置くだけでなく、中にも置くことができます。Aという記事とBという記事があるとして、それぞれの記事の途中に入れたり、AとBのサムネイル画像と並べて入れたりする方法があるでしょう。例えば、記事の途中で入れたい時。「そんなことでお困りなら、ぜひ弊社にご...本文にCTAを設置する場合は？どこに入れればいいの？
前回は、「CTA」についての概要を解説しました。私たちWEBデザイナーは、サイトのイメージに合わせてCTAボタンのデザインを考えています。今回は、谷宜樹がCTAボタンを設置する場所についても解説していくので、サイト運営者の方はぜひ参考にしてみてくださいね。■どこに設置したらいい？効果的な場所は？「資料請求」「ご注文はこちら」などのボタンを設置するならどこが良いと思いますか？ページの一番上、ヘッダーでしょうか。それともページの一番最後に出てくる方が良いでしょうか。サイトによって異なりますが、一般的によく置かれている場所にはこんなものがあります。・ヘッダーページの一番上に表示される部分です。ここに会社のロゴや、ホーム画面・企業説明・注文・お問合せなどの子ページに移動するボタンを設置することが多いでしょう。どこにCT...CTAはどこに設置する？WEBページ全体から考えてみよう
WEBページの構成についての解説で、谷宜樹がお話した「CTA」を覚えていますか？サイトの閲覧者に注文やお問い合わせをしてもらうために、「注文はこちら」などのボタンを設置することがあります。これが「CTAボタン」ですね。このボタンをどこに設置するかによって、商品購買率が変わることもあります。今回は「CTA」のデザインについて谷宜樹と見ていきましょう。■「CTA」とは？「コンバージョン」とは？サイトの閲覧者に商品購入や会員登録、お問合せなどの行動を促すものを「CTA（CallToAction）」といいます。また、WEBデザインによく使われる用語として「コンバージョン」もあるので併せて覚えておいてください。「コンバージョン」はサイトの閲覧者が商品の購入や資料請求などの行動を起こした状態のことです。閲覧者が行動を起こせ...「CTAボタン」とは？どんなデザインが効果的？
前回、色には「色相」「彩度」「明度」という3つの要素があると解説しました。WEBデザインをする時は、この3要素を上手く調節しながらページのイメージカラーや文字の色を決めていきます。今回は、色が持つイメージや、その色が与える効果などについて谷宜樹がお話していきましょう。■色のイメージとは？食欲がわくのはどっち？色が与える効果を体感するために、ちょっとイメージしてみてください。熱々のステーキがお皿に乗っていて、これからシェフが仕上げのソースをかけます。ソースは2種類。同じ味ですが、真っ赤なソースと真っ青なソースです。どちらのソースをかけた時の方が美味しそうに見えるでしょうか。赤やオレンジ、黄色などの暖色系は、食欲を増進する効果があると言われています。反対に、青や紫などの寒色系は、食欲を抑える効果があります。同じ味だ...色が与えるイメージは？テーマカラーは効果的なものを選ぼう
テーマカラーを決めよう！WEBデザインに必要な色の属性とは？
WEBページをデザインするうえで、テーマカラーを決めるというのはとても重要です。気まぐれに色を決めていると、ちぐはぐな印象になったりまとまりがない文章に見えたりします。また、目に飛び込んでくる色の情報が多すぎると、見ている人が混乱してしまいます。まずは、持たせたい印象やテーマに合ったイメージを考えて、WEBページのメインカラーを決めていきましょう。今回は、谷宜樹がWEBページで使われる色の考え方について解説していきます。■色の属性を理解しよう！WEBページなどに使われる色は、「色相」「彩度」「明度」の3つによって印象が変わります。それぞれどんな特徴があるか見てみましょう。・色相「赤」「青」などの色の区別のことです。「赤みがかかった」「青ざめた」「緑がかった」という表現があるように、色相は色味と色調を左右します。...テーマカラーを決めよう！WEBデザインに必要な色の属性とは？
これまでWEBデザインの概要や、WEBデザイナーの働き方について簡単に解説してきました。今回からは、より実践的なお話をしていきたいと谷宜樹は考えています。WEBデザインとはつまりこういうことをしているのだと、知っていただいたら嬉しいです。今回は、WEBデザインの基本でもある文字の装飾について、谷宜樹が解説していきましょう。■文字を装飾するとどうなる？WEBデザインをするにあたって、文中や画像に入れる文字を装飾することはとても重要な意味を持ちます。色やフォント、大きさによって人に与える印象が変わるというのは、初心者の方でも何となく分かっているでしょう。最も伝えたいことをより効果的にアピールするため、多くの人の目に留まるため、より視覚的に分かりやすい説明にするために、文字の装飾が行われることがあります。例えば、黒一...文字の装飾で何ができる？どんな種類があるか見てみよう
WEBデザイナーになるためには、技術と知識の習得が必要です。独学でも学校でも学ぶことはできますが、学習だけでなく実践を繰り返すことでセンスやスキルが身に付くと谷宜樹は思います。今回は独学にせよ学校で学ぶにせよ、必要になるWEBデザインの勉強について谷宜樹が解説していきましょう。■マークアップ言語を習得しよう以前、HTML・CSSなどの「マークアップ言語」について紹介しました。この言語を理解しないとWEBデザインはできません。まずは、よく使われているHTMLとCSSをしっかり勉強しましょう。入門レベルのもので構わないので、テキストを購入するのが谷宜樹のおすすめです。ネットでも情報は出ていますが、これを読めば理解できるほど簡単ではありません。古いやり方のようにも見えますが、テキストを片手にパソコンに向かい、実際にコ...WEBデザインを勉強する！実践が一番大切
前回は、WEBデザインの構成について谷宜樹が解説しました。今回は、その解説で出てきた「LP（ランディングページ）」について、詳しく見ていきましょう。企業のホームページやブログ、サイトのLPとは何でしょうか。■「LP」とは？LP（ランディングページ）とは、大きく分けて2つの意味があります。広い意味での場合と、狭い意味での場合では定義が違います。・広義でのLP訪問者が最初にアクセスするページという意味です。例えば、「りんご」と検索していくつかの結果が表示され、そのうちの1つ「青森県産りんご直売店」のサイトをクリックしたとします。クリックしてから一番最初に出てきた「青森県産りんご直売店」サイトのトップページがLPです。また、他のサイトを見ている時にポップアップ広告などが出てくることもありますよね。それをクリックして出...企業のサイトに不可欠？LPの意味を整理しよう
企業のホームページをじっくり見てみたことはありますか？書かれている内容を読んだことはあっても、WEBページの構成がどうなっているかまでは気にしていない人がほとんどでしょう。今回は、サイトやホームページでよく見られるWEBデザインについて、谷宜樹が解説していきます。■WEBページは三部構成が基本サイトやコンテンツのWEBページは、三部構成が基本だと言われています。WEBページに掲載したいことを3つのエリアに分けてデザインすると、分かりやすく見やすいサイトになります。3つのエリアの内容をそれぞれ整理してみましょう。①ファーストビューWEBページを開いた時、最初に出てくる画面のことです。キャッチコピーやリード文を使い、まずはサイトに訪れた人を惹きつけましょう。ここで訪問者が「続きを見たい」と思ってくれれば、スクロール...どんなデザインになっている？WEBサイトを効果的にするには
WEBデザインでは、図形や色が与えるイメージや、効果的な言葉選びについての知識が必要です。独学や学校で学んでいる人は、難しい理論に頭を悩ませることもあるでしょう。実際にアプリケーションツールを使ってWEBデザインの勉強を始めた人も、なかなか形にならなくて面白くないと感じるかもしれません。そんな時は、自分がどこまで知識を身に付けたのか、デザインのセンスがあるか知るために「ポートフォリオ」を作ってみると良いでしょう。今回は、谷宜樹が実践的なサイトの作り方を紹介します。■「ポートフォリオ」とは？投資の世界でも聞く言葉ですが、WEBデザインの分野においては「自分の作品（デザイン）をまとめたもの」を表します。本来は書類をまとめるためのケースという意味ですが、クライアントに対してWEBデザイナーが自分の実績をアピールするた...ポートフォリオを作ろう！自分の能力を確認&アピール
WEBデザイナーとして活躍している人は、どうやって知識を身に付けたのでしょうか。在宅でもできる仕事として人気が高まっているWEBデザインですが、誰でも簡単にできるわけではありません。今回は、谷宜樹がWEBデザインを勉強する方法について紹介していきます。■独学でもできる？必要なものは？WEBデザインを独学で、と考える人もいるでしょう。学校に通う費用や時間を考えると、空いた時間に家で勉強するのはお得かもしれません。しかし、スケジュールを立て、計画的に勉強を進めることのできる人でないと独学はかなり難しい道だと谷宜樹は思います。WEBデザイナーとして生計を立てたい人は、やはりお金を払って学校に通い、プロの講師に教えてもらいながら勉強する方が良いでしょう。副業でおこづかいを稼ぎたい人や、趣味の範囲でやっている個人ブログの...どうやって勉強すればいい？WEBデザインの学習方法
WEBデザイナーとして働きたいと思っている人はいますか？「WEBデザイナー募集」という情報があれば分かりやすいですが、事務や営業と比べて見つかりにくいですよね。どこで働けばWEBデザインの仕事ができるでしょうか。今回は、谷宜樹がWEBデザイナーの働き方について、3つのタイプをご紹介します。■WEBデザイナーの働き方とは？WEBサイトをデザインするのが、WEBデザイナーの仕事です。働き方によって、仕事内容や求められるスキルも違うと谷宜樹は思います。・制作会社で勤めるWEBデザイン・サイト制作などの会社に勤めるデザイナーの仕事を見てみましょう。クライアントからの依頼により、他社のWEBサイトをデザインするのが制作会社の仕事です。クライアントとの打ち合わせをWEBデザイナー自身がする場合と、営業や接客専門の担当者がい...WEBデザイナーはどうやったらなれる？働き方を見てみよう
WEBデザイナーとして働きたいと思っている人はいますか？「WEBデザイナー募集」という情報があれば分かりやすいですが、事務や営業と比べて見つかりにくいですよね。どこで働けばWEBデザインの仕事ができるでしょうか。今回は、谷宜樹がWEBデザイナーの働き方について、3つのタイプをご紹介します。■WEBデザイナーの働き方とは？WEBサイトをデザインするのが、WEBデザイナーの仕事です。働き方によって、仕事内容や求められるスキルも違うと谷宜樹は思います。・制作会社で勤めるWEBデザイン・サイト制作などの会社に勤めるデザイナーの仕事を見てみましょう。クライアントからの依頼により、他社のWEBサイトをデザインするのが制作会社の仕事です。クライアントとの打ち合わせをWEBデザイナー自身がする場合と、営業や接客専門の担当者がい...WEBデザイナーはどうやったらなれる？働き方を見てみよう
WEBデザインの方法とは？簡単に手順を解説！（コーディング・公開編）
WEBデザインをクライアントに納品するまでには、「企画」「デザイン」「コーディング」「公開」の大きな4ステップがあります。前回は企画とデザインまで解説しましたが、今回はその後のコーディングと公開について谷宜樹が解説していきましょう。■「コーディング」とは？まずコーディングとは何でしょうか。WEBデザインは編集ソフトなどで文字を入れたり、画像を挿入して完成するわけではありません。マークアップ言語によりデザインをWEBページとして表示させる作業が必要です。実際は、デザインした内容に合わせてHTMLやCSSを記述する作業となり、これをコーディングといいます。■「マークアップ言語」とは？コンピューターに文章をアップロードしても、単語や文脈の意味を正しく理解することができません。そのため、人間が「ここが見出しだよ」「ここ...WEBデザインの方法とは？簡単に手順を解説！（コーディング・公開編）
WEBデザインの方法とは？簡単に手順を解説！（企画～デザイン編）
前回、WEBデザインについてさらっと谷宜樹が解説しました。大体どういうことか分かっていただけたでしょうか？前回も少しお話しましたが、WEBデザインにはある程度の流れというものが決まっています。今回はその内容について、谷宜樹がもう少し詳しく解説していきますね。■WEBデザインの方法とは？WEBデザイナーは、個人で請け負う人、事務所に所属して働いている人がいます。個人であれば営業から打ち合わせ、デザイン制作や納品まで1人でやっていることもあります。デザイン事務所であれば、クライアントとの打ち合わせをする担当者とデザイナーが異なる場合もあるでしょう。チームを組んで複数で1つの案件を担当する事務所もあります。大きな会社になれば営業専門の部署があったり、プレゼンするだけの部署があることも。それぞれの形態によって独自の手順...WEBデザインの方法とは？簡単に手順を解説！（企画～デザイン編）
私たちが普段目にしている広告には、紙でできたチラシからテレビCMまで様々なものがあります。インターネットの世界でも、パソコンやスマホでいつも広告を目にしていると思います。今回はネット上で目にするWEB広告やサイト、ホームページなどのデザインについて谷宜樹が解説していきます。■「WEBデザイン」とは？ネットで目にする情報は、サイトやホームページ、広告などがあります。個人でもブログやサイトを運営している人がいて、それぞれオリジナリティあふれるページになっていますね。このネット上に表示されるページをデザインすることを、「WEBデザイン」といいます。たとえば、サイト内で使用する画像を作成したり、レイアウトを変更したりしてページを見やすくすることもWEBデザインです。個人的な楽しみとしてブログの見た目をアレンジするという...「WEBデザイン」ってどういうもの？何をするの？
「ブログリーダー」を活用して、谷宜樹さんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
