タグ別アーカイブ: デザイン論

sm2014

2014-02-21 勉強会 デザインとしてのマークアップ

この日の勉強会は、マークアップについてぼんやりなメンバーがいるので基本からやりました。

少々話がそれますが、デザイナーとはなんでしょうか?……..デザインする人のことです。そんなの知ってますよね(笑)

では、デザインとはなんでしょうか?….かっこいいのや可愛いいのを作るのもデザインですが、それだけではありません。便利で使いやすい伝わりやすいを作るのもデザインです。ユニバーサルデザイン(できるだけ多くの人が利用可能であるようなデザインにすること)なんていうのもありますよね。

意外と前者だけがデザインと思ってしがいがちですが、後者あっての前者な訳です。簡単な例ですが、大人の高級感を出したいなら黒と白を基調にするのがいいでしょう(シャネルとか)。子供の元気さを出したいなら原色をたくさん使うといいですよね(トイザラスとか)。何を伝えたいかによってデザインは変わってきます。なので伝えたい事がないのであればデザインは存在しません。伝えたい事などはさておき、自分が可愛いやカッコいいと思ったものを表現するのもアリですが、それはデザインではなくアートです。(まあ、デザインとアートについて話すと長くなるのでここではそうしておきます。)

toysrus

chanel

使いやすい伝わりやすいを作るのがデザインという事なら、正しいマークアップでサイトを作るというのは絶対必要な事です。検索エンジンGoogleにサイトの内容を伝わりやすくすることでGoogleの評価は上がります。評価が上がるという事は検索が上位に来るという事です。検索が上位に来るという事は、ユーザーにこちらの伝えたい情報が伝わりやすくなるのです。

今度は見に来てくれたユーザーの気を引く為に見やすい使いやすいを考慮しながらカッコいいや可愛いを表現していくのです。

ウェブデザイナーとはそんな仕事だと思います。僕もまだまだ未熟ですが、以上の事を知っているのと知っていないのとでは、だいぶ差が出てくるのではないでしょうか。というわけで見た目のデザインだけではなく中身のデザインも頑張りましょう。文字色を赤にしようかピンクにしようか悩むように、ここのマークアップはpかな?それともh2?などと悩んでいきましょう。文字色に答えはありませんが、マークアップには答えがあるので頑張りましょう。

あと、この記事を読んでいて何か違和感を感じませんでしたか?文才がないので読みにくいというのは無しで!(笑)
写真のサイズもそうですが順番が問題です。シャネル、トイザラスの順番で説明がされているのに、写真の順番が逆です。(こういうのはもともと人間工学という分野で研究されてきました。)使いやすさや見やすさを考えるのであれば、説明と写真の順番は同じでなければなりません。

footerで見かける「copyright©hogehoge.com all rights reserved.」のマークアップ

pでやったりaddressでやったりしてましたが、pの方が正しいみたいです。でも、そこが連絡先なのであればaddressがベター。下記サイト参照↓

http://www.html5.jp/tag/elements/address.html

以上勉強会まとめです。(というか僕なりのデザインの考え方かな w)

nobu001

レスポンシブ デザイン

こんばんは。

自分のサイトを製作中です。パソコン用のサイト(横幅1000px)を作り、スマホやタブレットなどはそのまま縮小されたのが表示されればいいや〜と思っていました。完成を間近にして、実際スマホなどで確認したところ不具合がありました。細々と修正しているうちに「こりゃダメだ〜サイトをレスポンシブデザインにせねば!」とレスポンシブデザインに開眼。
パソコン用のサイトとして、いくらカッコいいと思うものを作っても表示領域の小さいものでうまく表示されないのでは、人は見てくれません。極論ですが見てくれないものは存在しないというのと同じです。大学で勉強した哲学で言う所のエッセ・エルト・ペルキピ(注1)です。

以前、仕事でwordpressでサイトを作りました。テーマ2012をカスタマイズしました。その時はもちろんレスポンシブデザインでした。半分以上はテーマが対応しているので、自分がメディアクエリを書いたのはちょっとでした。

今回は全部自分でやるので、頑張ります!

あと、サイト全体のフォントサイズも16pxにしました。以前までは小さい方がおっしゃれ〜と思っていたのですが、大きく見やすい方が人に優しいかな。

「見やすい」「使いやすい」「伝える」などを形にするのがデザイン。
人がどう見ようと感じようと関係なく自分のイメージした物を形にするのがアート。(完全にそうとは言い切れないけど、とりあえずここでは対比の為に分かりやすくそうしておきます。)

仕事としてやっていくならウェブのデザイナーでなければいけません。
ウェブのアーティストというのもなんだかカッコよさそうですが、依頼がこなそうです。w (来たらうらやましい)

僕はデザインとアートの境界線を分かっているつもりでいるけど、時々その境界線が曖昧になってしまいます。一人前のデザイナーになるには、この境界線をきっちりと知る事だと思い自分の為に記しておきます。

1からやり直し中のサイト
マナカデザイン
先生、
・ページの右上のロゴfluid imageやってみました。
・なるべく横幅は数値指定しないほうがいいですよね?(する時は%がよいですよね。)
・フォントサイズも、もちろんemがよいですよね。
・以前りんごでやったドロワーメニューにも挑戦しようと思います。wordpressの2012(りんご)のように、たたんで1つにしてタップで全部が下に表示という風にしたい。この議事録をもとにできますか?僕の議事録cssとjQueryの2種類がありますが、現在実用的にはどちらがよいですか?あとドロワーは1000px以下で出現しようと思いますがどうおもいますか?

その他レスポンシブについてのアドバイスあれば、お願い致します。

注1
エッセ・エルト・ペルキピとは、18世紀の哲学者ジョージ・バークリーの有名な言葉で「存在しているという事は、知覚されていること」という意味のラテン語である。事物は知覚された時に初めて存在し始める。そして、その事物についての意識外では、事物は全くの無であるというのだ。その知覚は私の精神だけでなく人間性を築き上げている精神の共同体によって知覚されているという事なのである。例えば現実とは、私達みんながそこに参加し、様々な仕方や観点で関わりあっているものといえる。(僕の大学レポートを抜粋)

flat-multi-color

流行に終わらないフラットデザインのポリシー

フラットデザインって何?

最近のブームのはじまりはWindows8の「モダンUI(Metro UI)」あたりから。見た目の特徴としては、

  • 平面的:ドロップシャドウなどの3次元的な処理はしない
  • ミニマルな表現。グリッドや形状は正方形、長方形、正円などで構成され、角丸もグラデーションもほとんど使わない。
  • カラフルな色使い
  • タイポグラフィーを重視

ということ。ただし、見た目だけなら、似たデザインはありました。

続きを読む

study

2013-3-8勉強会

今日は、新メンバーのKIKOさんが参加されました。
お菓子が今回も更に充実!! KIKOさんからもたくさんいただきました!
KIKOさんは元漫画家さんという事で、イラスト作品も拝見させていただきました。さすがプロ!!

議題は以下の通り

  • KIKOさんのマッサージ治療院のチラシデザインについて
  • キャラメルメープルポップコーンのパッケージでマークアップとCSSの筋トレ
  • サイトのTOPページをWwordPressにしたい
  • WwordPressのユーザー一覧ページを作る

です。 続きを読む

3/8勉強会 治療院チラシ

新メンバーのKIKOです。

今日の勉強会では、私が友人に頼まれたチラシについてアドバイスをいただきましたので、まとめを書きます。

・まずターゲット 誰に読んでほしいのか?を明確にすること。

・どんなシーンで使うのか?-ポスティングなのか、店の中に貼るのかなども考える。

・アイキャッチで注目をひく。まずは目にとまらせる。

ー基本面積の2/3使い、キャッチコピーがかぶってもいい。

-魅力的な顔のアップが強い。または文字だけで魅せる。

・ジャンプ率ー見出しは強力なメッセージになる。大きい方がアイキャッチ効果がある。読みやすい。本文は小さい文字でいい。

・箱組ー左右、上下のラインを揃える。これは意識しないと揃えられない。

・フォントの種類は多くても3種類。少ない方がいい。

・色の種類もあまり使わない。カラーポリシーがないのはだめ。

・ホワイトスペースを考える。はじまで文字を入れない。何かに注目させるために余白を作る。

・ドロップシャドウは使わない。

自分のチラシの悪かった点

・アイキャッチが弱い。

・ジャンプ率が低い。

・本文の文字はもっと小さくていい。→本文の文字も大きくしなくてはと思い(小さくするのが怖くて) 結果、すべてが同じ大きさになりアイキャッチがなくなってしまった。

・箱組ができていない。縦横のラインが揃ってなくてジグザグだった。

・ターゲットが曖昧だった。

・治療院の前の看板にさしておくチラシなので、治療院の名前は小さくてもいいとのこと。(院名を大きくすることばかり考えてました)

→チラシの目的、役割を整理すること!!

以上です。今日のアドバイスをふまえて、作り直してみます!!

タカハシ先生、今日のメンバーの皆さん、本当にありがとうございました!初参加の私に、皆さんフレンドリーに接してくれて、とても楽しかったです。正直、学校よりもためになる、内容の濃いすばらしい勉強会でした。また参加させてください!!