WEBデザインに最適なハードウェアは？WindowsとMacの違い

WEBデザインをする時に使うものとして、PhotoshopやIllustratorなどのソフトが有名だとお話ししましたよね。
谷宜樹はこれらの一般的なプロ用ツールのほか、無料で使えるアプリも併用しています。
これからWEBデザインを始めようと思っている人は、ソフトだけでなくパソコンについてもどれを使えば良いか迷うかもしれません。
今回は谷宜樹が、WEBデザインに使うにはどんなパソコンを選べば良いか解説していきましょう。


■「ハードウェア」と「ソフトウェア」

WEBデザインの勉強を始める人のなかには、そもそもパソコン機器やインターネットのことをあまりよく知らない方がいるかもしれません。
谷宜樹の解説の中にも、時々出てくる2つの用語をここでお話ししておきましょう。
「ハードウェア」とはいわゆる「パソコン本体」のことです。
タブレットを使う場合は、タブレット本体のことをいいます。
このハードウェアにインストールして使うプログラムやアプリ、接続して使うCD・DVDプレイヤーなどのことを「ソフトウェア」と呼びます。
ただし、WEBデザインにおいてソフトウェアとは、普通プログラムやアプリのことを指すでしょう。


■今回はハードウェアについて考えてみよう

谷宜樹が以前お話ししたPhotoshopやIllustratorは、ソフトウェアのことです。
今回は、パソコン本体についてどんなものがあるか見てみましょう。
まず、一般的にパソコンとして流通しているのは、ほとんどが「Windows」か「Mac」です。
子どもの頃、学校の授業などで使ったのはMacよりもWindowsだった人が多いと思います。
ユーザー数も多く、特別ITに詳しくなくてもある程度使いこなすことができるでしょう。
MacはWindowsよりも高度な操作が必要で、配列も少し違います。
WindowsからMacに変えると、「あれ？あのキーどこにあるの？」と戸惑うかもしれません。
しかしMacの方がパソコン画面のデザイン性が高く、コーディング作業もスムーズに行えます。
そのため、谷宜樹はMacの方がよりプロのためのハードウェアになっていると思います。


■デスクトップ型か、ノート型か

WEBデザインをする人がすでにプロとして活躍しているなら、デスクトップとノート両方を持つべきでしょう。
デスクトップの大きな画面は何よりも操作しやすく、より美しいデザインが作れると思います。
ノートパソコンは外部での打ち合わせや、早急に処理しなければならない時に便利です。
しかし、初心者はノートパソコン1台から始めてみる方が良いでしょう。
WEBデザインの勉強段階では、ノート型の画面でも十分で、もしもっと大きな画面で勉強したければ外部ディスプレイをつなぐことも可能です。
ハードウェアは大きさよりも、スペックにこだわってみてください。



ノートパソコンでも高機能なものが多く登場しています。
デスクトップ型と違うのは、ディスプレイの大きさだけだと言っても過言ではありません。
外付けのディスプレイの方が使いやすいので、これから機器を揃える人はお店の人に相談してみましょう。

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

WEBデザインを作るためのツールとして、最も有名なのは「Photoshop」と「Illustrator」です。
この2つはサブスクリプション形式のツールであり、月額か年額の料金が掛かります。
操作方法もやや難しいため、「せっかく高い料金を払ったのに使えなかった・・・」ということもあるでしょう。
無料で使えるツールなら、気軽にWEBデザインの勉強ができますね。
今回は、谷宜樹が無料で使えるWEBデザインツールの選び方について解説しましょう。


■PhotoshopとIllustratorを無料で使う方法

PhotoshopとIllustratorを試してみたい場合は、7日間の無料体験版をダウンロードしてみましょう。
短い期間ですが、有料の製品版と同じ機能が使えます。
Adobe社の公式サイトからダウンロードしてくださいね。


■無料ツールをダウンロードする前に・・・

ずっと無料で使えるツールもありますが、ダウンロードするかどうかは慎重に判断しましょう。
「無料ツール」と書いてあったのに、実際はごく一部の機能しか使えなかったということもあります。
無料機能だけでは足りず、結局課金して使っている人もいるでしょう。
自分が使いたい機能が本当に無料なのか、しっかり調べておく必要があります。


■使い方は？公式サイトやネット情報があるかチェック

無料ツールの中には、海外製のものもあります。
ダウンロードしてみたら英語表記で分からなかったということがあるかもしれません。
また、どんなに便利な機能が備わっていても、使い方が分からなければ意味がないですね。
操作方法を調べることができるか、チェックしておきましょう。
ツールを提供している会社の公式サイトがあれば一番です。
多くの人が使っているツールなら、コミュニティSNSや情報ブログもあります。
そちらを参考にしても良いですね。


■ツールに求めることは？機能で選ぶ

WEBデザインに使うツールには、本当に様々な種類があります。
ツールはWEBページに利用する画像が作れるもの、デザインカンプなどWEBページを構成するためのもの、コーディング作業に使うものなどに大きく分けられるでしょう。
画像を作ることに特化したツールの中にも、自由なイラストが描きやすいタイプ、幾何学的な図形が描けるタイプがあります。
ただ人気だから、無料だからということで決めるのではなく、自分が何をしたいかによってツールを選びましょう。


今回は、無料ツールの選び方について解説しました。
具体的にどんなツールが谷宜樹のおすすめなのかは、また後日お話ししていこうと思います。

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

前回は、谷宜樹が画像編集ソフト「Photoshop」の使い方を簡単に解説しました。
基本的な機能のほんの一部でしたが、いかがでしたか？
ソフトを使ったことのない人でも、感覚的に操作できるところがあるでしょう。
しかし、マニュアルを見ないと分からないところも多いと思います。
詳しい内容はPhotoshopを提供するAdobe社の公式サイトをご確認ください。
今回は、同じAdobe社から出ている描画ツール「Illustrator」の機能についてお話ししていきましょう。


■図形を使ってみよう！組み合わせても面白い

Illustratorには、丸や四角形、星型などの図形から選んで描くことができます。
また、違う形の図形を組み合わせたり、図形から一部分をくり抜いたりしても良いでしょう。
単純な図形しか使っていなくても、組み合わせ次第で複雑なイラストも作れます。
WEBページに使う図形だけでなく、アイコンやロゴ、トップページ画像など様々なものを作ってみてくださいね。


■ペンで描いてみよう！図形にない形を描きたい時

図形以外の形を描きたい時は、どうしたら良いのでしょうか。
イラストなど、図形に頼らない描き方をしたい場合は、「ペンツール」を使ってみましょう。
直線を引くツール、曲線を引くツール、自由な線が描ける鉛筆ツールが用意されています。
ただし、Illustratorは「ドロー系グラフィックソフト」と言われており、操作がやや数学的です。
いわゆるお絵描きソフトとは違い、実物のペンと同じような線画ができるわけではありません。
点と線の考え方ができないと難しく、トレーニングが必要でしょう。


■自由に描くのが難しい…でもキレイに描ける

Illustratorは、フリーハンドで描くのとは違う感覚でしょう。
点を配置し、点と点をつなぐ線を引き、線を角度を調節しながら曲線を描きます。
思いつくまま絵が描けないので、不自由さを感じるかもしれません。
しかし、Illustratorでは非常に美しい図形を描くことができます。
手ブレや、描き方のクセによる線の太さの違いもないでしょう。
左右対称の形を作るのも簡単です。
また、拡大しても画質が荒れないため、多くのWEBデザインに使われています。


■使えるか心配…無料体験で相性を確かめてみよう

谷宜樹は、どんなツールでもユーザーとの相性があると思います。
多機能・高機能なツールであっても、操作する人のタイプによっては全然使えないこともあるのです。
Illustratorが使いこなせるか心配だという人は、無料体験版を使ってみてはいかがでしょうか。
Adobe社の公式サイトからダウンロードできるので、ぜひチェックしてみてください。


Photoshopに比べて、Illustratorは難しいという人が多い印象です。
サブスク料金も高いので、まずは7日間の無料体験で試してみましょう。

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

最近テレビで「SDGs」が盛んに取り上げられていますよね。 報道番組だけでなく、バラエティでもSDGsを意識した内容になっていることが多くなりました。 例えばクイズ番組では、SDGsについてどんな問題があるのか、どのような行動がSDGsにつながるのかが出題されています。 谷宜樹が属しているWEBデザイン業界でも、SDGsについて考えるべきだと提言され始めました。 今回は、WEBデザインにおけるSDGsのあり方について解説していきましょう。 ■「SDGs」とは？世界の目標 「今更人に聞けない・・・」と分かっているふりをしている人がいるかもしれませんが、「SDGs」とは何でしょうか。 これは「Sustainable Development Goals（持続可能な開発目標）」のことをいいます。 持続可能な、を英語で言うと「Sustainable」です。 企業サイトでも、よく「サスティナブルな活動」とか「サスティナブルな材料を使った製品」などと言っていますよね。 「今後も私たちの世界が続いていくために、今地球上にある様々な問題を、世界中の国が一緒に解決していきましょう」というテーマのもと、私たち人間一人ひとりが持つべき目標を「SDGs」としているのです。 ■どんな目標があるの？ SDGsには、17の目標が設定されています。 貧困や飢餓をなくし、適切な医療や教育を全ての人に届けること。 また、ジェンダーによる差別がないこと、人種や国によって不平等がないことなどが挙げられています。 他にも、企業や先進国が自然環境の保全に責任を持つことなども目標になっているでしょう。 これまで各分野で問題提起されていたことを、世界の目標としてまとめたのが「SDGs」です。 ■WEBデザインでできることは？ 谷宜樹のWEBデザイン業界も、SDGsについて考えなければならないことがあります。 例えば、ネットの使用によって排出されるCO2は全体の約3.8%といわれています。 また、国によってコンテンツを自由に使えなかったり、安心のためのサービスが利用できなかったりするでしょう。 これらの問題を解決するために、WEBデザイナーもやれることがあるはずです。 ■「サステナブルWEBデザイン」とは？ SDGsに取り組み始めたWEBデザイン業界。 次のようなものが目標達成に貢献できると考えられています。 ・デザインの少ない設計 WEBページに使うデザインが少ない方が、SO2の排出量も少なくなります。 必要最低限のデザインにすることがSDGsになるでしょう。 ・必要な情報のみを選択する ユーザーにとって無駄な情報は、世界全体にとっても無駄なものだと思います。 役に立たないコンテンツであふれないように、マーケティングを意識したWEBデザインをするべきです。 他にも様々なことが考えられています。 興味がある人は調べてみてくださいね。 WEBデザインもSDGsを意識する時代です。 これから勉強を始める人は、新しい世界に合わせたWEBデザインを学んでいってくださいね。

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

前回は「ワイヤーフレーム」とは何か、について谷宜樹が解説しました。
今回は、具体的にどうやって作成していくかお話ししていきます。
作ってみたいWEBデザインがある人は、ぜひ一緒にワイヤーフレームを作成してみてくださいね。

■「サイトマップ」を作ろう！全体像をイメージ

いきなりページ内のテキスト・画像の位置を決めようとしても上手くいきません。
まずは、どのようなものが必要になるかイメージしてみましょう。
例えば、企業説明のページを作る場合は、何が必要でしょうか。
企業のロゴ、本社の画像、事業内容が分かるテキスト・・・他にもたくさんの要素があります。
ホームページであれば、トップページの他に複数の子ページを作ることが多いですよね。
どのページに何を表示するか、全体像を把握する「サイトマップ」を作りましょう。
サイトマップは、エクセルで作成するのが谷宜樹のおすすめです。
トップページから子ページまでどのようにつながっていくか、1ページずつ書き表してみてください。

■トップページはワイヤーフレームが必須！あとは臨機応変に

サイトに必要なページが出揃ったら、どのページにワイヤーフレームを作るか決めましょう。
トップページはサイトの顔なので、必ずワイヤーフレームを作成する必要があります。
しかし、子ページの場合は画像とテキストのみの簡単な配置になっている場合もあるので、絶対に作らなくてはいけないというわけではありません。
サイトの中で重要だと考えられるページのみ、ワイヤーフレームを作っても良いでしょう。

■レイアウトを決めよう！アイディアはメモしておく

ワイヤーフレーム化するものが決まったら、レイアウトを考えながら作成していきます。
レイアウトには列状になっているもの、タイル状になっているものがあり、それぞれイメージが異なります。
どれを選べば良いか、また後日谷宜樹が解説していきますね。
自由に配置しても良いですが、まずは代表的なレイアウトから選ぶのがおすすめです。
テキストや画像の位置とともに、
「ここはこの色を使う」
「○○という内容をポイントとして表示する」
というメモも入力しておくと便利です。

■効果的なコンテンツに仕上げる

テキストと画像を貼り付けるだけでなく、ヘッダー・フッターを印象的にしたり、「グローバルナビゲーション」というメニューを表示させたりすると魅力的なページになります。
内容によって、ヘッダーに入力するべきもの、メニューバーに取り入れるべきものがあるので、よく考えてみましょう。
詳しい方法については、また後日解説していきます。

ワイヤーフレームが完成したら、それをもとにデザインカンプを作成してみてください。
デザインカンプを作っていてつまづいたら、またワイヤーフレームを見直すと忘れていたことや新たなアイディアに気付けるでしょう。