「ワードプレス」デザインの経験がない初心者でも気にせずかじってみよう。Webデザイン。それは、永遠のテーマです。今回は、「ワードプレス」デザインの経験がない初心者でも気にせずかじってみようについて書いていきます。
Webデザイナーであるはずのあなたが、デザイン性もない人だとしたら話しになりません。ですがワードプレスの登場により、仮にあなたがデザイン性も全くない人だとしても何の心配もいりません。
| 結論を先に話ししておきます |
| Webデザインは「見た目のビジュアルデザイン」と「使い勝手の機能デザイン」の2つに分けられていることは言うまでもありません。Webページに辿り着いたユーザーの心を一瞬でキャッチするには、ビジュアルデザインにおける工夫が必要です。
Webページのレイアウトやカラーについての知識とセンス、適切な写真やイラストを選択できる技量が必要となります。あなたのブログに訪問してきてくれたユーザーに対し、Webページをスクロールさせたのなら、最初の作戦は成功と言えます。
次の目標としては、誘導したいWebページへのリンクボタンをクリックして貰うことです。ただリンクボタンをどのようにデザインするのかを判断するには、ビジュアルデザインに加えて、機能面でのデザインが必要となります。
以前、似たような投稿をしてますので、良ければ覗いて見て下さい。 |
目次はコチラ
【Webページのデザイン】
Webデザインの考え方をビジュアルデザインの視点から、再構成してみたいと思います。ワードプレスでは、世界中のWebデザイナー達によるテーマが「無料」又は「安価」で手に入れることが可能となります。
しかしながら、どれを選択すれば良いのか、そしてどのようにカスタマイズすれば良いのか。それには、技術者のデザインと言う視点だけではなく、ビジュアルデザイナーの視点が欠かせないと言えます。
デザイン全体を見渡そう
Webページは、あなたもご存知のように、様々なものに例えられてきました。それは「電子ニュース」「電子掲示板」「電子ブック」などです。「電子●●」とは、昭和の雰囲気が漂う懐かしい名前だと思いませんか？
Webページを作ってきた人達は、Webの可能性を実現しながら、それまであった「新聞」「掲示板」「書籍」などのメディアを参考にしてきたと言うことでしょう。これら既存のメディアとWebページの共通点はいかがでしょうか。
それは、2次元空間におけるメディアと言うことが挙げられるかと思います。それまで既存のメディアは「新聞紙」「黒板」などの「掲示板」「紙の書籍」と言った2次元の印刷物又は手書きのメディアだった訳です。
| 電気で映し出すモニターによって表示されるWebページは「電子」によって表示されています。これは、実際の「紙」や「黒板」と「電気」による表示方式の違いだけです。このことを覚えておきましょう。 |
Webページにおける最大の特徴と言えば、双方向性やハイパーリンクによる情報の共有にあると考えます。ユーザーは、ページに埋め込まれたボタンやリンクをクリックすることで、自分が進みたいページに移動できます。
またメッセージを入力して、それをページに表示し、そのメッセージに対するリアクションを受け取ったりできる訳です。同一ブログ内に作成されるページは、1ページ目から順に読まれるとは限りません。
| Webデザイナーは、リニアなページ進行だけではなく、何度も複雑に進んでは戻るページ進行を想定しながら、それでもユーザーに分かりやすく充実度の高いブログを構成する能力が要求される訳です。
またユーザーが表示するモニターのサイズによっては、自分が作成したレイアウトやコンテンツが意図した通りに表示されると言う保証もありません。Webデザイナーは、日々、自分自身と戦っているのです。 |
【デザインの実装をサポートするツール】
Webデザインには、それぞれのWebデザインにおけるツールの特性を知っておいた方が良いでしょう。Webデザインの実装をサポートできるツールは非常に多くあり、その為、戸惑う可能性が出てくるかも知れません。
例えばですが、敢えて名前を挙げるとすれば「Photoshop」「Illustrator」「Adobe XD」「Sketch」「Figma」に於いては有名ですが、それぞれメリットやデメリットなども勿論ある訳です。では一つ一つ紹介していきましょう。
Photoshop(動画付き)
「Photoshop・フォトショップ」は「撮影した写真を加工し、思い通りの見栄えに仕上げたい」「画像や文字を使って、Webページやバナーなどをデザインしたい」「水彩画や油絵のような手描きのタッチをデジタルで表現したい」など。
もしそのような考えをお持ちであれば「Photoshop」は、最適なツールと言えます。「Photoshop」は、プロが使用する世界最高峰の画像編集ソフトであり、精度の高い写真の編集は勿論、高品質なデザインやイラストを作成できます。
| 「Photoshop」には、様々な沢山のツールが備わっています。「Photoshop」は「Adobe社の製品」です。「Photoshop」に興味ある方はココをクリック。 |
ではここで動画を視聴してみて下さい。題して「Adobe Photoshopの始め方【超初心者必見】」です。
Illustrator(動画付き)
「Illustrator・イラストレーター」は「テキストと画像を組み合わせたレイアウトの作成やデザイン」また「線や図形を組み合わせたイラストの作成に最適なツール」と言っても良いでしょう。
「Illustrator」でできることは「ポスターやチラシのデザイン」「ロゴのデザイン」「イラストの作成」「地図やグラフの作成」など、いろいろありますが、この他にも、まだまだありますのでご自身でお確かめ下さい。
| 「Illustrator」も「Photoshop」同様「Adobe社の製品」で、とても人気があります。「Illustrator」に興味ある方はココをクリック。 |
ではここで動画を視聴してみて下さい。題して「【超初心者向け】イラストレーター基本ツールの使い方編」です。
Adobe XD(動画付き)
「Adobe XD・アドビ エックスディ」は「webサイト」や「モバイルアプリ」など、音声デバイスのUI/UXの為のデザインツールと言っても良いでしょう。「ワイヤーフレーム」「デザインカンプ」「プロトタイプ」を作成することができます。
また「クライアント」や「制作チーム」への共有を、一つのアプリで実現することが可能です。デザイナーだけではなく、ディレクターやプランナーも思い描いたアイデアを直ぐに形として落とし込むこともできます。
| Webデザインと言えば、先程紹介した「Photoshop」や「Illustrator」が主流でした。ですが「Adobe XD」が登場してから、その方向性は「Adobe XD」に向けられるようになったと言います。「Adobe XDもAdobe社の製品」です。「Adobe XD」に興味ある方はココをクリック。 |
ではここで動画を視聴してみて下さい。題して「WebデザイナーのためのXDの使い方【基礎編】」です。
Sketch(動画付き)
「Sketch・スケッチ」は、オランダの「Bohemian Coding社」によって開発されたベクターグラフィックエディタです。「Sketch」は、2010年9月7日、MACのOS用として、リリースされ、2012年「Apple Design Award」を受賞しています。
「Sketch」と、従来のベクターグラフィックエディタの主な違いはと言うと「Sketch」には、印刷デザイン機能が含まれていないことでした。また「Sketch」は、今に於いては、ウインドウズにも対応しているとのことです。
| 「Sketch」は、主にWebサイトおよびモバイルアプリの設計の為の「UI」および「UX」のデザインツールです。最近では、プロトタイプの作成やコラボレーションに焦点を絞り、デジタル設計の為のプラットフォームを志向しているとのことです。「Sketch」に興味ある方はココをクリック。 |
ではここで動画を視聴してみて下さい。題して「誰でもできるsketchの使い方解説① どんなソフトで何が凄いの？」です。こちらの動画は⑧まであるようです。
Figma(動画付き)
「Figma・フィグマ」は、ブラウザ上で誰でも簡単にデザインを描くことが可能なツールです。インターフェースのデザインを、特に場所など選ばなくても、ブラウザさえキチンと起動できれば使えます。
利便性が非常に高く、チーム体制での作業にも向いています。何より、有料プランでなくても、無料プランで利用できるので、誰にでも手軽に導入できることから、デザイナーでない人であっても、ちょっとした用途に役立つことでしょう。
| 「Figma」の便利な点として、Web上で利用できることが挙げられます。アカウントさえ取得していれば、作成したデザインは、制作時に使用したPCではなく、Web上で呼び出すことができる為、オフィスと自宅で作業をスムーズに継続できます。「Figma」に興味ある方はココをクリック。 |
ではここで動画を視聴してみて下さい。題して「初心者向けFigmaの使い方：Webデザインをトレースしてみよう」です。
【参考となる良いデザインを見てみよう】
上記で紹介したようなツールや他のツールでも同じことが言えるのですが、ツールを使うだけでは、良いWebデザインはできません。どうしてかと言うと、それはデザインアイデアが必要になるからです。
その為、Web担当者の方は、多くのデザインを見て、目を養うのをススメています。多くのデザインを見ておくと、依頼する際のイメージを共有しやすいからです。例えばですが、参考となる文面を見てみましょう。
「カッコ良い感じで作って欲しい」「スタイリッシュ且つ斬新な感じで作って欲しい」と言うように、漠然とした注文をするより、具体的に、ここはこうして欲しい、ここのところはこのようにして貰いたいと言ったことを話しして貰いたいと言うことです。 |
そのように、自身の頭の中に、デザインとなるアイデアの引き出しを作る為には、良いデザインがされている参考となる沢山のWebサイトを見るのが一番なのです。実際に私自身も、沢山のWebサイトを参考としています。
| 参考となるWebサイト | |
今回は「ワードプレス」デザインの経験がない初心者でも気にせずかじってみようについて、あれこれ書いてみましたが理解して頂けたでしょうか。これからブログを始めようとしている初心者の方は特に、カッコ良く作りたいと思っているはずです。
私もブログを始めたばかりの頃はそう言う考えでした。確かに見た目をカッコ良く作れば、イメージ的にはそれで良いかも知れません。ただカッコ良いデザインと言うのは、後々、不思議と飽きてくるものです。
