WEB部ログ

WEB部メンバーの勉強用ブログです。

WEB部メンバーの勉強用ブログです。

WCAN 2016 Spring 「2016年web配色のイロハ」

森本です。

私は、WCAN 2016 Springのセッション1「2016年web配色のイロハ」の内容と感想を書かせていただきます。

このセッションでは主に、

  1. シンプルになった配色
  2. トップページよりOGP画像
  3. テキストは黒く、大きく

この3つのことがお話しされていました。順に振り返りたいと思います。

シンプルになった配色

webサイトを見る端末の画面サイズが、技術の進化によりどんどん小さくなっていきました。それによって色の置く場所が減ったり、細かい装飾が見にくくなったため、webサイトの色数が減ってきたそうです。

今まで基本だった配色は、

ベースカラー70%、サブカラー25%、アクセントカラー5%などと色の面積の割合を決めて、それに5~10色を割り振っていくというものでした。

f:id:web_bu:20160506214933p:plain

しかし、現在webサイトはさまざまな大きさの端末から見られているので、webサイトの色の割合は端末によって変わってしまいます。

そこで登場した配色の考え方が、ロゴ色+写真+トーン展開です。ロゴ色などのようなメインカラーを1色選び、サイトのメイン画像となる写真を置いた後、ロゴ色や写真の色に近いトーンの色の中から1,2色選んで使うというものです。

f:id:web_bu:20160506214922p:plain

同じようなトーンの色を使用するため、この配色をすると落ち着いてシンプルなwebサイトになります。また、色数が少ないと思ったら増やすくらいでちょうど良くなるそうです。

また、色数が減ったので1色1色のイメージをよく考えて選ぶことが大切になったそうです。色には、日常生活に応じて分類した基本色彩語というものがあり、日本では、

赤・青・黄・緑・紫・白・灰・黒・オレンジ・ピンク・茶

の11色に分けられています。少し例を挙げると、

  • 灰:スタイリッシュ ←→ 陰気
  • 紫:  高級感   ←→ 不吉
  • 緑:  安らぎ   ←→ 未熟

のようになります。色には良い意味と悪い意味をどちらも持っており、場面によって使い分ける必要があります。

私はこの話を聞いて、りんごだから赤、などと単なる実物の色を選ぶのではなく、できるだけwebサイトの訪問者にプラスのイメージをに与えられるような意味を持つ色を考えて選べたらよいと思いました。

トップページよりOGP画像

まず、OGP画像とは、WebサイトがFacebookなどのSNSでシェアされた時にタイムラインに表示される画像です。

f:id:web_bu:20160507001730p:plain

このように、webサイトの雰囲気を訪問する前に画像で伝えることができます。

これに対し、トップページは、検索エンジンで検索をかけても、タイトルやデスクリプションといった文字だけが表示されるので、リンクをクリックしないと見ることができません。

なので、トップページのデザインは主に「webサイトの訪問者を追い返さない」役割を担っています。逆に言えば、トップページのデザインは客寄せをすることができないのです。

だから、どんなに良いwebサイトも訪問されることがなければ無意味になってしまうので、客寄せができるOGP画像の方がトップページのデザインよりも大切なのではないか、というお話でした。

大会などでOGP画像を作る機会はおそらくないと思うので、私はこの話を聞いて、逆にデスクリプションの大切さを感じました。

テキストは黒く、大きく

最後に、テキストのスタイルについてです。

最近のテキストは全体的に色が黒くなってきているそうです。その理由として、スマートフォンの外での利用が挙げられます。強い外光の下では画面が見にくくなるため、テキストと背景の色のコントラストを高くしなければいけません。そのため、Googleニコニコ動画のように、スマートフォンサイトのみ文字を黒めに設定するwebサイトも出てきています。

また、テキストのサイズが大きくなってきているそうです。例としてAppleのwebサイトでは、

  • 大きめのテキスト 24px/27px #666(灰色寄り)
  • 小さめのテキスト 18px          #333(黒色寄り)

というスタイルになっています。大きめのテキストは、ディスプレイのサイズが一定以上大きければテキストも大きく、小さければ小さく表示されるようになっています。

これは上記の配色とは逆で、大きなディスプレイを持つPC向けの設定です。確かに小さな端末もとても普及していますが、液晶ディスプレイの技術も向上して低コストで作れるようになったため、大きなディスプレイのPCも販売はされています。

今のweb業界では、スマートフォン対応が当たり前で、プラスアルファで大きなPCにも対応できるようにするということが求められてる、ということだそうです。

この話で、私が気になったのはemという単位が全く話されなかった点です。Appleがテキストをpxで指定しているとのことで、他にも世の中のwebサイトが一体どのようにテキストの大きさを指定しているのかソースを見て回りたいと思いました。

感想まとめ

お題が「イロハ」ということもあって、少し聞いたことのある内容もありましたが、それらのさらに深い話が聞けて、より詳しく理解ができとても勉強になりました。

また、お話しされた坂本さんが、いろいろなwebサイトのテキストのスタイルを細かく収集されていることが印象的でした。既存のwebサイトにはたくさんの参考になる点があると思うので、気になったwebサイトをじっくり分析して収集してみたいと思いました。

WCAN 2016 Springに参加しました②

佐々木です。セクション3についての続きです。

 

日本の自治体

自治体サイトは、住んでいる人や興味を持った人など見る人が幅広く、また年代層も限定されていないため、多くの人に使い勝手がいいようにデザインされています。
そのためデザイントレンドの調査対象に入っているそうです。

ほとんどは周辺の自治体サイトをベンチマークして作られるので、ある自治体サイトで新しいものが取り入れられると、他のサイトでも採用されることがあります。

 

名前を知ってもらう

市や町の名前は、変わった読み方をするものがあります。
例えば、函南町で「かんなみちょう」など。
サイトを見てもらった人に正しく地名を読んでもらうために、ふりがなを振ることが大切です。

改めて注目して見てみると、自治体サイトの地名ほとんどにふりがなやローマ字が振ってあることに気づき、驚きました。

 

フッター山

フッター山は、その名の通りフッターある山のイラストです。
地域や親しみを感じさせるとても素敵なデザインだと思いました。
かわいらしいイラストを用意することは難しいですが、三角や丸などのモチーフを使うことなら私にもできそうだと思いました。

参考サイト:愛別町城里町中富良野町

 

ゆるキャラのその後

ゆるキャラグランプリの開催などもありメインに起用されていたゆるキャラ達は最近ではあまり見られなくなり、アクセントとしてページトップボタンやバナーに登場したりしています。

 

コンシェルジュ式自治体サイト

サイトを開いてすぐに検索窓があり、受付(コンシェルジュ)の役割をはたしています。
このような検索窓をどんと押し出したデザインがあることを今回初めて知りました。

参考サイト:神戸市菊池市柏崎市

 

緊急時への対策を!

東北大震災や熊本大地震など、最近震災を身近に感じます。
いざ地震が起こった際に、運用への対策をすることが重要になります。

 

自治体特設サイト

自治体の特設サイトは、サイト内サイトや、自治体のサイトの中からいけるテーマ別サイトの立ち位置にあります。
暮らしや観光に注目したサイトが多いです。

 

注目サイト

1.移住系サイト

新居地を目指す人に向けたものと、都心につかれた人へ向けたものの2タイプに分かれます。

参考サイト:空き家に暮らすいばらきまち暮らし

 

2.Webの駅

道の駅をもとに命名されたコミュニティポータルサイトの名前です。
なんだか親しみを持てる名前だなと思いました。また、これからも増えていくかもとのことでしたので、どんな「Webの駅」ができるのか楽しみになりました。

参考サイト:天草Webの駅水俣Webの駅

 

3.タブレットで制作

Adobe slateというアプリでは、タブレットでWebコンテンツ制作できます。ホスティングもしてくれます。

参考記事:Adobe Slate はスペシャルサイト制作に向いているAdobe Slateを使いWeb作成

 

私はあまり自治体サイトに注目してみたことがなかったので気づきませんでしたが、自治体サイトにも地域によって多くの特徴や工夫がされていることを学びました。

 

2016年これからのトレンド予想

  • フラットはこれからも継続
  • 手書き風のイラストなどを用いたオーガニックなデザインのサイト
  • おなじみのキャラを大切に
  • ファンページ

 

感想

今回のセッションで、多くのデザインの手法やトレンドについて学ぶことができました。
トレンドはどんどん取り入れていくものだと思っていましたが、すぐに廃れてしまうものもあり、見極めて活用しなくてはいけないということを知りました。

また、デザイントレンドとはまた別の話ですが、矢野さんが「かかわる職種が昔より増えた」とおっしゃっていたのが印象に残っています。

実際のWeb会社では、それぞれ分業で活動していることを就業体験でも学びましたが、今自分のしている作業をもっと広く分担してするとなると、伝達や意思疎通がもっと大変になるのでは!?と思いました。
あらためてコミュニケーションの大切さを感じました。

簡単!ローカルで作ったサイトをスマホで確認する方法

こんにちは!太田です。

今回は、スマホサイトを作るときに役立つちょっとしたテクニックをご紹介します!

ローカル環境でサイトを作ると...

ふだん、課題や大会練習でサイトを作るとき、みなさんはPCのローカル上でサイトを制作していますよね?
ご存知だと思いますが、そのままxamppなどからApacheサーバを立ち上げて"http://localhost/~~"に他のPCやスマホからアクセスしても、自分の作ったサイトを見ることはできません。
しかし、少し準備をするだけで、他のPC・スマホからもアクセスできるようになるのです!

用意するもの(環境)

 

アクセスできるようにする手順

その1: ネットワークに接続する

他のデバイスから自分のローカルにアクセスするためには、それらが全て同じネットワークに接続されている必要があります。
ネットワークは、有線でも無線でもOK。一番手軽なのは、同じWi-Fiに繋げることでしょうか。

 

その2: サーバを立ち上げる

ネットワークに繋げることができたら、次は、XAMPPやMAMPなどのソフトからApacheサーバを立ち上げましょう。これが立ち上がっていないと他のデバイスからアクセスすることはできません。

 

その3: IPアドレスを確認する

次に、サーバを立ち上げたPCのIPアドレスを確認します。確認方法は、まずコマンドプロンプトを立ち上げ、"ifconfig"コマンド( Windowsは"ipconfig"コマンド )を打ち込みます。

f:id:web_bu:20160324232752p:plain

[Enterキー]を押すと、そのPCの情報が表示されるので、その中からPCのIPアドレスを探しだしましょう!

f:id:web_bu:20160324232744p:plain

 

その4: いよいよ接続!

これで準備は完了!!他のデバイスからアクセスするには、PCからアクセスするときのアドレス"http://localhost/~~"の、"localhost"の部分を、先ほど調べたIPアドレスに変えればOKです。

例) PCのIPアドレスが192.168.24.1、閲覧したいファイルが~/htdocs/site/index.htmlの場合
PC: http://localhost/site/index.html
SP: http://192.168.24.1/site/index.html

f:id:web_bu:20160503173229p:plain

 

この方法を使えば、本サーバがなくても簡単に実機でサイトの確認ができます!PCブラウザのウィンドウを小さくして見たサイトと、実際にSPで見たサイトでは印象が違って感じるかもしれません。

また、SPブラウザ特有のバグも残念ながらあるので、実際に運用されるサイトを制作する際は必ず確認を行うようにしましょう!

WCAN 2016 Springに参加しました①

こんにちは、佐々木です。

4月23日に開催された「WCAN 2016 Spring」に参加させていただきました。
今回も資料収集の方法や配色など、様々なことを学ぶことができました。
また、先輩方がライトニングトークでお話ししていたのも、とても印象に残っています。
私も堂々と大勢の人の前で話せるようになりたいです。

多くを学んだ今回のWCANのなかから、セッション3について書かせていただきます。

 

Webデザイントレンド 2016 春の陣 in Nagoya

f:id:web_bu:20160503125244j:plain

原一浩さん、矢野りんさん、坂本邦夫さんのお三方に、2015年から2016年にかけてグローバル企業や上場企業、地方自治体などのサイトで行ったデザインリサーチの結果についてお話ししていただきました。

「トレンド」とは最先端ではなくその時代に最適化されつつあるもの、のことです。

 

2015年から2016年上半期までの全体の傾向

  • 安心と穏やか
  • フラットデザイン
  • 色は華やかに

 

海外デザイン

玉ボケからローポリへ

玉ボケ…画像に玉がぼけてる感じに浮かんでいるようにする手法

ローポリ…何かを重ねてカクカクしたモザイクにしたように見える手法

海外サイトを中心にローポリが流行しています。今回のWCANのバナーなどもローポリでした。

ローポリの作り方はとても簡単で、画像とフィルターを用意し、その二つを合わせて透過度を上げたものをもとの画像に重ねるだけです。

かっこいいイメージを作りたいときに効果的な手法だなと思いました。

 

パステルマット

パステルマット…背景がパステル調の画像

ちょっと前までは女性向けのグッズサイトなどでよく見られましたが、最近では男性向けの彩度を落とした渋めのパステル調も広く使われているようです。

参考サイト:A Splash Of ColorHelbak CeramicsTerritory Dog Collection

 

2016年春のトレンドカラーもパステル!

Pantoneという企業が選んだ2016年のトレンドカラーは「ローズクォーツ」と「セレニティ」という淡いピンクとブルーの組み合わせです。
2色合わせて使用するのがトレンドのようですが、使いどころに迷いそうです。

 

珍バーガーナビ

メニューを表示させるために使われるハンバーガーナビが、グローバルナビゲーションの一つに含まれていたりと、変わった使われ方をしているサイトがあるそうです。私はこういった珍バーガーナビを見たことがなかったので驚きました。

 

「下へ」はホイールアイコン

ホイールアイコン…ページが下に続いていることをユーザーに分かってもらえるようなマウスの形をしたアイコン

ページが続いていることが分かりづらい「ルーセル」(カルーセルが画面全体)や「ファーストビュースプラッシュ」(ファーストビューが全て画像)のようなスクリーンで覆いつくされている系のサイトでよく用いられています。

個人的にはホイールアイコンが登場する以前によく用いられていた方法として紹介されていた、下向き矢印のアイコンが好きです。

f:id:web_bu:20160503141721p:plain

 

グローバル企業

オウンドメディア

オウンドメディア…消費者に興味を持ってもらえるよう、企業から消費者へ発信するメディア

50文字以上でないとSEO上ではじかれてしまうため、おもしろい長文が書けるオウンドメディアの形で、価値のあるコンテンツを作るようになったそうです。

私がオウンドメディアと聞いて思いついたのはLIGさんです。
たしかに、記事を読んでいるとその企業自体にも興味がわいてきます。

 

大量アイコン

アイコンはユーザにとっても便利なものですが、多すぎるとかえって混乱させることにもなります。
特にグローバル企業はコンテンツがたくさんあるので、少しユーザ的にはきついかもしれません。最高で7つが適切です。

例としてあげられたサイトのアイコンの多さにはとても驚きました。

f:id:web_bu:20160503165407p:plain

 

上場企業

かえってきたレインボーナビ

レインボーナビでは、サービスやカテゴリーごとに色を分けるといったパターンがありますが、カテゴリー分けをしていないサイトもあるようです。

レインボーナビの代表格、楽天では、色が一周してまた戻ってきています。

セブン&アイ・ホールディングスでは、自社のブランドカラーを用いてレインボー風にデザインしています。
七色よりもなじみのあるカラーで素敵ですね。

ただ、トレンドとしてはもう終わってしまっているそうです。

 

薄幸系デザイン

薄幸系デザインの特徴は、「文字が小さく、色がうすい」「余白が広め」「PC版とスマートフォン版が同じ表示」です。

訪問者への面白みはあまりありませんが、株主に向けて必要な情報が発信されるようなっており、企業の都合に最適化されたデザインだといえます。

参考サイト:株式会社ベルーナカネヨウ株式会社ダイヤモンド電機株式会社

 

ルーセルや薄幸系デザインなど、知らない知識が盛りだくさんでした。

また、海外デザイン編で多くトレンドの手法を話されたことから、海外のサイトを見ていくことの大切さを感じました。

 

wcan Springで学んだこと。

こんにちは。

2年生の千賀です。

今回は、4月23日(土)に行われた「wcan Spring」、

その中でも矢野りんさんの「グラフィックでDL数を稼ぐ方法」

についての感想を書かせていただきます。

 

アプリケーションをダウンロードするときに、

どのように情報を集めるでしょうか。

TVCM、WEB広告、アプリ内広告、そしてアプリストアでしょう。

その中で、最終的に詳細を得るのはアプリストアだと思います。

つまりアプリストアで表示されるストア画像は、ダウンロードを決定する最大の情報、ということになります。

このストア画像をどう作るか、というお話をされていたのですが、

これはwebサイトのメインイメージにおいても同じなのでは、と私は考えました。

 

1.キャッチコピーが大事

「初めに考え、15文字、多くても25文字程度で、わかりやすい言葉で。」

これは、アプリの話でしたので、この機能はこう!などという

話でしたが、実際にサイトにおいてもそこに住んでいる人だけが

わかるような話では意味がありません。

また、長くなりすぎてもいけないのかな、と改めて思いなおしました。

 

2.画面構成

「左から1枚目、つまり、最初に見てもらえる画像に最大のウリをかく。」

たくさんあってもみてもらえない、というのは、自分自身があまり見ていないというのもありなるほど、となりました。

私はいつも画像を作ってるときに3枚目で名物を入れるなどをしてしまっていました。

気を付けていきたいです。

 

また、「DL数○○突破!!」などの数字を入れるとよいという話もありました。

ランキングを作るときや、何か商品の紹介サイトなどを作るときには、大大として入れていくといいのかもしれません。

 

最後に、画像の話は少し離れて、

「意見を求める」

ということの話について書かせてください。

今まで、自分もできてないし、素人目線なのに先輩や同輩に意見を言うのは…

みたいな感じで意見を言うのはためらっているときがありました。

しかし、知識や実績のある人の意見ももちろんとても大事ですが、

なんの知識もない人の意見も大事なのです。

なぜならば、

好みさえも一般の目としていい意見であり、

なによりどこまで自分の伝えたいことや工夫が伝わっているか。

などが判明するからです。

この話を聞き、私も積極的に気になったことは意見してみよう、と思いました。

それと同時に、先輩方は「好みかもしれないけど…」というのも意見していたな、と思い出しました。自然と大切なことができる先輩方は本当に素晴らしく、見習って生きたです。

 

 

長くなってしまってすみません。

今回のwcanは、私が現在でなやんでいるようをタイムリーに教えてくれたようでした。今回の話を生かし、よりいいwebサイトを作っていきたいです。

 

 

 

 

 

 

デモンストレーションのテクニック

加藤です。

アップルップルの社長さんに勧めていただいた動画がとても参考になったので、記事にしておきます。テーマはデモンストレーションテクニックです。

続きを読む

ギャラリーサイトご紹介

こんにちは。佐々木です。

今回は、スマートフォンサイト専門のギャラリーサイトを3つご紹介します。

 

iPhoneデザインボックス

design.web-hon.com

スマートフォンサイトとPCサイト両方のデザインを見ることができます。

 

sps collection

spscollection.com

たくさんのカテゴリーや色から選んで見ることができます。

 

AGT smartphone design gallery

agtsmartphonedesign.com

キャプチャにマウスをもっていくと、下にするすると動きます。

 

PCから検索すると、スマートフォンサイトを見たくてもPC版が表示されて困っていたのですが、これらのサイトを見つけてからはたくさんのデザインを見れるようになりました。

PC版とのデザインやコンテンツの違いを比べてみたりすると面白いです。

最近デザインがワンパターンになりがちなので、素敵なアイディアを見つけていきたいです!