• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

日々学ぶウェブデザインについて、すぐに役立ちそうな情報を綴っていきます。Webデザインメモ

2015年6月27日(土曜日)  ()

デザインを自分のものにする方法。~サイトデザインのストックのススメ~

今週は、よかもん市場・よかとこ旅行券のサイト公開への準備に追われいました。
寝不足がつづく一週間でしたが、よかもん市場、よかとこ旅行券のサイトは6月26日に公開されました!



さて、デザイナーがサイトデザインを制作する際、まずワイヤー(骨組み)から描きはじめると思います。
その際、構成を1から作り出そうとしていませんか?
特に新人のころは、構成を最初から自分で考えようとしてしまいがち。
ですが、それだと時間がいくらあっても足りなくなります!それよりも、世の中にある良いサイトをたくさん見て、「このデザインがいい」「このデザインは使える」というポイントをストックしたほうが、仕事もはかどる上、デザインのスキルアップにつながりますよ。

では、どのようにサイトをストックすればよいでしょうか。
今回は、私が行っている方法を紹介しようと思います。


1)「サイトまとめ」のサイトをブックマーク!
まずは、世の中にあふれている良いサイト・きれいなサイトをかき集めます。
しかし、片っ端から集めようとすると、時間がかかってしまいます。
そんなときは、「サイトまとめ」を多いに活用しましょう。
webデザインまとめサイトで有名なのは、
「muuuuu」ですね。
この他にもまとめサイトはいろいろ転がっているで、検索してみてください。



2)キャプチャをして、データをまとめる
まとめサイトからや、自分で見つけてきたいいサイトは、キャプチャでとってまとめましょう。
Chromeユーザなら、拡張機能の「Awesome Screenshot App」がおすすめ。
ブラウザの画面キャプチャを撮影することができます。

3)サイトを模写し、なぜいいと思ったかメモする。
サイトをまとめたら、自分のものにするために手を使いましょう。
A.ノートに手描きする。
手描きの場合は、ワイヤーのようにざっくりと。どこにどんな要素があるか分かる程度でOK。
このときに、サイト名、どの部分が良いと思ったかをメモをしましょう。あとで見返したときに便利です。
B.パソコンで模写する。
キャプチャしておいたサイトは、PhotoshopかFireworksを使って上からなぞるように模写します。
要素の振り分け方、色の使い方、テクスチャの乗せ方、ボタンの大きさ、文字間・文字サイズまで学べることがたくさん発見できます。


以上です。
サイトを見つけたときに、漠然と見るのではなく、
「なぜ、いいと思ったのか」を考える癖がつくようになりました。
ただなんとなくかっこいいサイトをつくるのではなく、ユーザがつかやすいものを作っていきましょう!

AliveCastIPのみ表示されます

OK

管理側

残り

javascript css html VIEW側

php matchルーチン