gihyo.jp » WEB+DESIGN STAGE » 連載 » 独学で極める “Webデザイン”の技と心 » 第4回 参考作品・参考資料を活かしたWebデザインのコツ

独学で極める “Webデザイン”の技と心

第4回 参考作品・参考資料を活かしたWebデザインのコツ

デザインを起こすために何から始めれば良いか

独学でWebデザインを極めていくとはいえ,まっさらな状態から何かのデザインを起こすためにはまず何から手をつければ良いのかすらわからない時期がありました。

周りにデザインについて教えてくれる先輩がいる場合は,直接コツを尋ねてみることも良いかもしれませんが,そういった環境でない場合(とくに独学で勉強されている方の場合)「良い作品を見て,実際に良い作品のどこが良いのかを分析して,良い作品を参考にしながら自分の手を動かし,考え,作ってみること」が大切だと思います。

かく言う私も,異業種でしたし,デザインに詳しい先輩や先生が近くにいるわけではありませんでした。経験上,作ってみて試行錯誤することが,結果的に一番身に付いていると思っています。

仕事としてデザインする場合は何かの目的があって,あらゆる制限の中で依頼されることがほとんどですが,まずはスキルアップを目的とするのであれば制限も何もいりません。自分の好きなように何か作ってみましょう。突然気負いして大掛かりなサイトを作らなくてもかまいません。ちょっとした1枚のページでも良いのです。

今回は,自己紹介ページを例にとって,どのようなプロセスでつくっていけば良いのかを考えてみます。

自己紹介ページを例にとってプロセスを考える

一番身近に作れそうな題材として,自己紹介ページとしてみました。

単純に表組みをしてニックネームや趣味を並べるだけでもできあがるものですが,そこでデザインすることにより,自己紹介に付加価値を付けることができるようになります。

自分のことを効果的にアピールすれば良いのですから,自分が一番アピールしたいところ,自分の信念,自分の好きなものなどをまず箇条書きにしてみましょう。これらは公開しなくてもかまいません。自分にあてはまりそうなキーワードを羅列するだけです。

ごくあたりまえのことかもしれませんが,こういった箇条書きの断片に,Web デザインのヒントが沢山詰まっています。

① 自己紹介に関連するキーワードの書き出し例

  • 緑色が好き
    →安直ですが,好きな緑色をベースカラーにしてみても良いでしょう。

  • 海が好き
    →海をテーマにしたデザイン・挿絵などを検討できそうです。

  • 夏が好き
    →夏を連想させる風景・行事・動物などを取り入れてみても良いでしょう。

  • 職業は服飾デザイナー
    →自己紹介をみて仕事依頼がくるようなきっかけ作りを想定した場合に,とても重要なキーワードとなります。

  • 1960年代のポップカルチャーに影響を受けている
    →その年代に流行した配色やファッションアイテムなど,さまざまな参考資料を引っ張りだすことができます。

  • 一度決めたことは最後までやり通す性質
    →芯のかたさを売りにするような抽象的なモチーフや背景などを創造するヒントになります。

  • ※実際はもっと多く挙がると思いますが,わかりやすい例として抜粋してあります

これらすべてを取り入れてしまったらどこかでコンフリクトしてしまいます。この中で一番自分がテーマとしたいところ・大切にしているところを絞り込んでいきます。もちろんどれも大切と言ってしまえるのかもしれませんが,ここでどんなものを引き算していくのかで,方向性がはっきりしてきます。

② 目的を再確認し,テーマを定める

  • 目的 得意分野のアピールを兼ねた自己紹介をする
  • 1960年代のポップカルチャー・ファッションをイメージさせるテーマ

このように定めておくと,参考資料がぐっと探しやすくなります。

③ テーマに沿った他の参考資料や参考サイトを探す

この段階で,同じような方向性を持つサイトをリサーチします。自己紹介サイトというだけではあまりにも広範囲ですので,ここは「1960年代ポップカルチャー」というキーワードで探してみましょう。

普通に検索サイトでキーワードを入れるやり方も1つの方法ですが,良質なサイトを集めたギャラリーサイトには,色別,目的別で検索できるものもあり,効率良く良質なサイトを閲覧することができるのでお勧めです。

著者プロフィール

山田あかね(やまだあかね;purprin)

エスカフラーチェLLC,デザイナー。名古屋出身。Web業界とまったく関係ない業種で独立して働く傍ら,Web/XHTML/CSS等技術を独学。2005年「コトノハ -○×ソーシャル」のデザインリニューアルを行ったのをきっかけに上京し転職。株式会社paperboy&co.で主にソーシャルブックマークサービス(POOKMARK Airlines)等の Webサービス開発に携わる。2007年1月,エスカフラーチェLLC の設立に参画し,デザイナーとして幅広く活躍中。

URLhttp://purpr.in/blog/

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

Ruby Freaks Lounge

Rubyに関わる,執筆者自身の旬なテーマを扱った,リレー形式の連載です。

これでできる! クロスブラウザJavaScript入門

JavaScriptはウェブ制作において避けては通れない重要な言語ですが,JavaScriptに苦手意識を持たれている方は少なくないようです。 その最大の原因がクロスブラウザ対応という課題であり,本連載ではクロスブラウザ対応のテクニックを詳細に解説します。

ビジネスで成功するためのシステム運用管理のポイント

システムの多様化,技術進歩に伴い,ITシステムの運用管理の必要性が年々高まっています。本連載では,システムの運用管理とは何かについて,現場のニーズと具体的な指針を押さえながらを解説します。

2010年版SEO体得講座

本連載では,いまや企業サイトの戦略の1つとして欠かすことのできないSEOについて,最新トレンドからすぐに使えるTipsまでを紹介します。

小型Linuxサーバの最高峰 OpenBlockS 600活用指南

搭載メモリの増加,CPUクロックの向上など,あらゆる面が強化された期待の新モデルOpenBlockS 600。この記事ではOpenBlockS 600の紹介から,活用するためのさまざまなノウハウを紹介していきます。

はじめMath! Javaでコンピュータ数学

プログラミング言語入門者向けに,知っていると役立つ数学的トピックスを紹介します。簡単な演習問題と解説で,即活用できる知識を目指します。

教科書には載っていない ネットワークエンジニアの実践技術

ネットワークエンジニア,インフラエンジニアのトラブル対応には,時には「教科書通りにいかない」テクニックが必要となります。資格試験では得られないこうした実践的な技術について,実例を元に紹介します。

Googleケータイ,世に現る

2008年9月,Googleが中心となって開発されている「Android」を採用した携帯電話「T-Mobile G1」が発表されました。本連載ではT-Mobile G1を中心にGoogleケータイに迫ります。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス

最近のコメント