【基礎知識】稼げるウェブデザイナーの基礎講座。Webとデザインについて

日本では

コロナウイルス感染者も

少しずつ減少傾向ですが、

まだまだ油断できません。

そんな時でも

PCと接続環境さえあれば、

どこでもできるのがデザイナーの強みです。

未来が読めないからこそ、

本業をやりつつ、

副業デザイナーを目指してみるのも

おすすめです！

デザイナーに興味のある方は、こちらのブログがオススメです。

今からでも在宅デザイナーになれる？！デザイナーになった経緯とデザイナーになって良かった事５選！

そんな今日はウェブとデザインの知識を

お伝えします。

「知識なんかいらない！スキルをすぐに覚えたい！」

という気持ちもわかりますが、

何か作れるようになっても

ウェブの知識がないと

どこかで頭打ちになります。

こういう勉強は苦手！という人もいると思いますが、

基本的な知識は、スキル習得と同じくらい大事なこと！

例えば

サッカーでゴールを入れるのが

めちゃくちゃ上手になっても

基本的なルールを知らなければ、

サッカーのゲームはいつまでたってもできないですよね。

ですので、ウェブの知識もしっかり

身につけていきましょう！

ウェブとは

簡単に言えば、

インターネットを利用して、

テキスト・画像・音楽などへ

次から次へとアクセスし、

閲覧できる仕組みのことを指します。

「Web」とはWWW上にある複数のページの集まりを指し、それぞれのページを「ハイパーリンク」によって行き来できるようになっています。これがWebの特性の一つでもあり、最大の魅力でもあります。WWWは「いつ・どこにいても・誰でも・同じ情報へアクセスできるようにする」ため。この基本は今でも変わっていません。当たり前にも聞こえるこの特性はWebだけのものです。

デザインとは

モノやコトを今以上に

良くするための工夫をすることです。

「デザイナー」というとおしゃれな

ファッションで、カッコイイロゴや

フライヤーを作る人のことを想像しますか？ 

彼らはデザイナーの中でも

「グラフィックデザイナー」という

「見た目」を中心に考える設計士さんなのです。

目に見えるものはインパクトが

強いので意識しちゃいがちですが、

「計画」あってこその「見た目」という

順番を忘れないようにしたいですね。

Webとデザイン

それぞれの意味については

分かりましたね。

つまり、Webデザインとは、

ネット上にあるものを活用して、

今以上にモノゴトを良くする仕事のことなのです。

紙とWeb

デザインには、紙とWebのデザインがありますが、

これらは全くの別物です。

🔻どこが違うのが、それぞれを比べてみましょう。

紙のデザインはフライヤーや雑誌、

駅やビルに張り出されている

屋外広告などがあります。

それらは目的や掲載情報、

紙のサイズから配布・

掲出する場所まで決まっており、

その中で最大限の効果がでるように

設計されています。

スマホの電池が切れていても、

自分からアクセスしようとしなくても

視界に入れば伝えたいことを

届けられるのが強みですね。

いつでも・どこでも・誰でも

では、Webサイトやサービスはどうでしょう。

アクセスさえできれば

「いつでも・どこでも・だれでも」

利用できるというのがインターネットの強みです。

これが「ユビキタス」という概念です。

当たり前すぎてピンとこないかもしれません。

インターネットができる前は、

分からない事は人に聞くか

本を読むしかありませんでした。

例えばカメラの上手な人に

自分のプロフィール写真を撮ってもらったり、

ダイエットについてアドバイスが欲しいと思っても、

詳しい人に会うのには友達のツテを辿ったり、

お店や個人の電話番号が全て載っている(!)電話帳から

片っ端から連絡してお店に行ってみたりと、

大変手間のかかるものだったのです。

今では、SNSやマッチングサービスを使えば

詳しい人をすぐにたくさん見つけられます。

その中で自分にあった人を

じっくりと探せる

ようになりました。

しかも土日祝日、早朝深夜、いつでもです!

＊＊＊

今日は、ここまで。

今日はWebの特徴や

デザインとは何？というところを

お伝えしました。

このように

デザイナーとして知っておくべき知識も身につけて

より稼げるデザイナーになりましょう！

次回もこの続き、基礎知識をお届けします。

今日もご覧いただきありがとうございました

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

このようにアメブロでは、

ウェブの初心者からでもわかるように

ネットリテラシーを高め、

ウェブデザイナーになれるまでの

コンテンツを提供しております。

もしよければフォローお願いいたします♪

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

【準備編】稼げるウェブデザイナーの基礎講座。アドビのIllustratorをインストールしよう！

 私のアメブロでは

「稼げるデザイナー 」になるための

スキルや情報をお伝えしています。

最近は、コロナも相まって、

「テレワーク」が広がっていますが、

どんな状況であれ

PCと接続環境さえあれば、

どこでもできるのがデザイナーの強みです。

デザイナーに興味のある方は、こちらのブログがオススメです。

今からでも在宅デザイナーになれる？！デザイナーになった経緯とデザイナーになって良かった事５選！

そんなデザイナーに必須なツール、

アドビのイラストレーター（Illustrator）の

インストール方法をお伝えします。

今日はちょっとボリュームありますが、

ではさっそく始めましょう！

Adobe イラストレーターとは？

Illustratorは、線や色のはっきりとしたイラストの作成、さらにテキストの編集やレイアウトにも最適なツールです。

 

Q. それでは、ワードやエクセルと比べて、Illustratorを使用したデザインとでは何が違うのでしょうか？

A. Illustratorはレイアウトの制限がほとんどなく、

ドキュメント上に画像や文字を自由自在に配置できます。

画像に文字を回り込ませたり、

図形や文字の中に画像を配置するといった

ワードやエクセルではできない細かな調整が可能です。

参照：アドビ

Q. 同じアドビ製品のphotoshopとは何が違うのでしょうか？

A.Photoshopは主に写真を補正・加工するためのツールで、画像の微妙な色味や質感の調整を得意とします。それに対してIllustratorは、線や色のはっきりとしたイラストの作成、さらにテキストの編集やレイアウトにも最適なツールです。Illustratorで作成するデータはあとからでも編集がしやすく、どれだけ拡大したり変更を加えたりしても鮮明な画質を保ちます。

参照：アドビ

Q. どんなデザインが出来るのでしょうか？

A.ロゴやアイコン、LINEスタンプ、

ポスターやTシャツプリントなど

紙のデザインからプロダクトデザイン、

ウェブで使用するデザインなど

あらゆるデザインに使えます。

イラストレーターで出来ること

出来ること1  ロゴの作成

▲　微妙な線の動きにこだわったロゴ

▲　男性フリーカメラマンさん用ロゴ

出来ること2 イラストの作成

▲家でパソコンをする様子

出来ること3 ポスターのデザイン

▲不動産会社のチラシ

▲ネイルサロンのポスター

出来ること4 地図やグラフの作成

▲素材のグラフ

▲簡単な地図

Adobe イラストレーターのインストール方法

 

Illustratorの無償体験版

イラストレーターは有料で、

月額2480円（税別）です。

ただし、初めの7日間だけは無償体験版を

利用することができます。

無償体験版でも機能制限などは無いので、

無償期間でIllustratorの機能を

色々と試しておきましょう。

①Adobe IDの取得

まずは、

Illustratorの無償体験版へ

アクセスしてください。

アクセスするとアンケート入力が

求められるので、

アンケートに答えましょう。

次に、Adobe IDをお持ちでない方は

「Adobe IDを取得」のボタンをクリックして

先に進みましょう。

既にAdobe IDをお持ちの方は

ログインをクリックして進めてください。

アンケートに答えたあとは、

Adobe IDの取得に必要な情報を入力して、

「ADOBE IDを取得」ボタンを

クリックしてください。

これでAdobe IDの取得は完了です。

そのままCreative Cloudのダウンロードが始まります。

② Illustratorのインストール

（ここからは私のパソコンがmacのため、macの作業画面になります）

Creative Cloudのインストーラーを開く

Creative Cloudのダウンロードが始まりますので、

ダウンロードが完了すればファイルをクリックしてください。

次のようなウィンドウが開くので、

「Creative Cloud Installer」をダブルクリックしましょう。

警告が出ますが、そのまま「開く」をクリックします。

次にインストールの許可が必要なので、

Macのユーザ名とパスワードを入力し、

「OK」をクリックしてインストールを開始しましょう。

まずはログインしましょう。

Illustratorの「体験版」をクリックします。

次に、「続行」をクリックします。

すると、Illustratorのインストールが始まりますので、

しばらく待ちましょう。

インストールが完了すると、

「体験版の使用」ボタンをクリックして

Illustratorを起動してみましょう。

無事に起動できますと、下記のような画面になります。

以上で完了です。

今日は、

イラストレーターの出来ることから

インストール方法まで

お伝えしました。

ウェブデザイナーにとって

これがなくては始まらない！くらい重要な

ツールです！

まずは、お試し7日間から触ってみて

本気で稼ぐと決めたなら、

ぜひソフトをインストール

してみてほしいと思います！

今日もご覧いただきありがとうございました

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

このようにアメブロでは、

ウェブの初心者からでもわかるように

ネットリテラシーを高め、

ウェブデザイナーになれるまでの

コンテンツを提供しております。

もしよければフォローお願いいたします♪

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

【準備編】稼げるウェブデザイナーの基礎講座。PC版「Canva」の使い方解説！

私のアメブロでは

「稼げるデザイナー 」に

なるためのスキルや情報をお伝えしています。

ウェブデザイナー といえば、

アドビのIllustrator(イラストレーター)や

Photoshop(フォトショップ)を使えないと

お仕事ができないと思われていますが、

無料アプリの「canva」でも

バナーやチラシを作ることができます。

今回のこちらの動くバナーもCanvaで作りました！

一刻も早くウェブデザイナー として

仕事をできるようになるためには、

手段に時間をかけないこと！

無料の「canva」を使えば

簡単にプロっぽいデザインを作ることが

できるようになります。

ではさっそく始めましょう！

無料アプリ「canva」に登録

 

まずはCanvaに会員登録（無料）しましょう。

２、3分で終わります。

まずは下のリンクからCanvaのトップページに飛びましょう！

canva

登録方法は3種類あります。

Facebook/Googleのアカウントを使う方法であれば、認証（パスワードを入力）するだけで登録が完了します。

FacebookやGoogleのアカウントを使っても、個人情報が

盗まれてた！なんてことにはならないのでご安心ください。

 

メールアドレスで登録する場合も、

「名前（ニックネーム可）」と

「アドレス」で登録完了。

このページは、ブックマークしておくと

使うときに見つけやすいので便利です！

Canvaの使い方

 

では、

Canvaのテンプレートを使って

「バナー」デザインを作ってみます。

①右上の「デザインを作成」ボタンをクリック

下のようなホーム画面が出ます。

②どのテンプレートから始めてもOKですが、

今回は下の「マーケティング」項目の中の

一番左端の「Blogバナー」をクリックします。

そしたら、下のような編集画面になります。

③左に並んでいる様々なテンプレートから

好きなデザインを選びます。

テンプレートを選ぶと、右側に反映されます。

④文章の上をダブルクリックすると

文字が変更できます。

フォントサイズの変え方

上の数字の部分をクリックすると、フォントサイズが変えられます。

いらないパーツを削除するには？

ヒゲのマークのアイコンはいらないので、deleteキーで削除します。

⑤画像を変更します。

左側の写真をクリックすると、

Canvaにはたくさんの写真が用意されています。

その中から作りたいデザインに合った画像を選びます。

今回は、パソコンの画像が欲しいので、

「パソコン」と検索します。

たくさんのパソコン画像が出てきました！

自分の好きな画像を

元画像の上にドラックアンドドロップします。

牛乳の画像が入れ替わりました。

⑥作った画像をパソコンにダウンロードします。

右上の白のダウンロードボタンをクリックして、

再度、緑のダウンロードボタンをクリックします。

以上で、ダウンロード完了です😊

その画像を、

アメブロでも

インスタでも

facebookでも

なんでも使用OK！！✨✨

できたバナーはこんな感じ。

↓

このまま、

アメブロのトップ画像にできそうですね！💡

今日は、

無料のアプリ「Canva」の登録方法から

バナーを作るところまで解説しましたが

いかがでしたでしょうか？

結構簡単なので、

まずは、無料のアプリ「Canva」を使って、

バナーを作って見るのはいかがでしょうか？

今日もご覧いただきありがとうございました

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

このようにアメブロでは、

ウェブの初心者からでもわかるように

ネットリテラシーを高め、

ウェブデザイナーになれるまでの

コンテンツを提供しております。

もしよければフォローお願いいたします♪

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

【準備編】ウェブデザイナーの基礎講座！覚えておくべきショートカットキー〜これで作業効率10倍に〜

今回は、デザインの仕事をする上で欠かせない

WindowsとMaxのパソコン作業を

より迅速にするショートカットキーをご紹介します。

覚えておくべきショートカットキー

 

ショートカットキーとは、

キーボード上の複数のキーを同時に押すなど、

キーボードを用いて簡単にパソコンの操作をするための機能のことです。

 

Macの主要なショートカットキー

Command+C	選択した項目をクリップボードにコピー
command + V	クリップボードの内容を貼り付ける
command + X	選択した項目を削除して、クリップボードにコピー

command + tab	開いているアプリを切り替える（tabを複数回押すと切り替わる）
command + S	現在の変更を保存する
command + Z	直前のコマンドを取り消す

command + W	最前面のウィンドウを閉じる
command + F	画面内の項目を検索する

command + N	新しい書類・ウィンドウを開く
command + O	保存されているファイルを開く ※Finder上のファイルを選択してこのショートカットキーを使うと、そのファイルを開きます。 Windowsではreturnを押すとファイルが開きますが、Macの場合returnは「ファイル名の変更」です。

command + P	印刷する
command+shift + N	新しいフォルダを作る

command + delete	ファイルをゴミ箱に捨てる
return	ファイル名の変更

command + shift + 3	スクリーンショットを撮影（全画面）
command + shift + 4	スクリーンショットを撮影（選択範囲を指定）

control + D	カーソルの右側の文字を削除
control + A	カーソルを行の一番先頭に移動

Windows10の主要なショートカットキー

 

Ctrl + C	選択した項目をクリップボードにコピー
Ctrl + V	クリップボードの内容を貼り付ける
Ctrl + X	選択した項目を削除して、クリップボードにコピー

Ctrl + tab	開いているアプリを切り替える（tabを複数回押すと切り替わる）
Ctrl + S	現在の変更を保存する
Ctrl + Z	直前のコマンドを取り消す

Ctrl + W	最前面のウィンドウを閉じる
Ctrl + F	画面内の項目を検索する

windows	スタートメニューを表示する
windows + D	デスクトップを表示する
Alt + tab	アプリやウィンドウを切り替える

Ctrl + Y	元に戻した操作をやり直す
Ctrl + O	ファイルを開く
Ctrl + P	ファイルを印刷する

Shift + F10	ショートカットメニューを表示する
Alt + F4	ウィンドウを閉じる

Printscreen	スクリーンショットを撮影(全画面)
windows + Shift + S	スクリーンショットを撮影(選択範囲を指定)
Ctrl + F	ファイルやフォルダーを検索する

いかがでしたでしょうか。

今回はショートカットキーをいくつか紹介しましたが、

あくまでも一例なので

自分が使いやすいようにカスタマイズしたりして、

さらなる時短テクを身につけていきましょう。

今日もご覧いただきありがとうございました

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

このようにアメブロでは、

ウェブの初心者からでもわかるように

ネットリテラシーを高め、

ウェブデザイナーになれるまでの

コンテンツを提供しております。

もしよければフォローお願いいたします♪

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

【準備編】ウェブデザイナーの基礎講座！Googleアカウントを開設しよう！

今日も前回の続き

前回のブログはこちらです→【準備編】ウェブデザイナーの基礎講座！Google Chromeをダウンロードしよう！

Googleアカウントの開設です！

5分くらいでできちゃうので、

スキマ時間にやってみてくださいね！

Google Chromeアカウントの作成

 

①下記のURLをクリックするとGoogleアカウント登録の画面に遷移します。
Googleアカウント作成

フォームの項目を記入しましょう。

これでGoogleアカウントの登録が完了しました。

明日は、パソコン操作でよく使う、

ショートカットキーについてです。

今日もご覧いただきありがとうございました

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

このようにアメブロでは、

ウェブの初心者からでもわかるように

ネットリテラシーを高め、

ウェブデザイナーになれるまでの

コンテンツを提供しております。

もしよければフォローお願いいたします♪

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝