こんにちは。@ryorasppです。

昨日はこちらに参加してきました!

WordBench 名古屋 勉強会へようこそ

https://wbnagoya.doorkeeper.jp/events/33178

【WordBench Nagoya 11月度】「速習!魅せるウェブサイトを作るテクニック」 – WordBench Nagoya | Doorkeeper

この通り、聞きに来ている人が大勢でして、
今回はすごい内容を聞けるのだなあっとそんな空気でした。

WordBench Nagoya 11月度、こんなにたくさん集まりましたー!はじまりまーーす!Ustreamも放送してまーーす!http://www.ustream.tv/channel/wordbench-nagoya

Posted by WordBench Nagoya on 2015年11月20日



今回お話をしていただいた方はこちら!

大阪で現役でWebデザイナーをされてる方なのです!

http://5dg.biz/

ホームページ制作SOHO 大阪/近畿 5DG -Five Dimension Graphics-

本も出されている方なのです!

内容

今回はUstreamにて配信されており、それを録画されたものがYoutubeに上がっていて観れるので、もしその時のを見たい方はこちらからどうぞ!

ご覧になるとわかるように、大阪の方なのでバリバリの大阪弁かと思いきや、
結構標準語で話されていて、わかりやすく話すのが上手な方でとても聞きやすいお話でした。

それに加え、面白いところは大阪弁出ていて、さらに面白かったです。

(個人的な主観です。)

※これからその時のお話でこれはっと思ったことを書いていきますが、それが全てではないので、もっと話を見たい人は上にあるYoutubeをどうぞ!

基礎知識

僕はデザインのこと全くの無知で今回、ついていけるのか不安でしたが、
デザインの基礎から話されていて、とても勉強になりました!

配色のお話

青色は誠実を表していて、
現に、病院のサイトや首相のサイトは青で決めているという例を見て、

なるほどっと思いました。

僕は誠実なことや真っ直ぐなこと好きなので、このブログ青にしておいてよかったなと思いました。

それから、本能的に女性はピンクを好むという話にはさらになるほどと思いました!
とてもわかりやすく頭にスッと入っていくのです。

サイト制作にはこの6色を用意するという話も、
そうかプロはこう色を準備しているんだと、プロの場の一面を見ることがきたのもよかったところです。

Adobe Color CCというものが便利らしく、全く知らなかったので、今回のお話をきっかけに、使えるようにしておこうと思います。

https://color.adobe.com/ja/create/color-wheel/?base=2&rule=Shades&selected=0&name=%E3%83%9E%E3%82%A4%20Color%20%E3%83%86%E3%83%BC%E3%83%9E&mode=rgb&rgbvalues=0.75,0,0,0.5,0,0,1,0,0,0.25,0,0,0.9,0,0&swatchOrder=0,1,2,3,4

カラーホイール | カラースキーム – Adobe Color CC

WEBからも使えるので、もし配色に困った時は活用していきたいです。

他の人が作った配色もピックアップできるのがとても良さそうです。

かわいく女子っぽく

かわいく女子っぽくサイトを作る時の色の使い方など、
僕には一切関わってこなかった話なので、
結構勉強になることがありました。

構図

この構図にすると重力に逆らう形になるから緊張感が生まれる

そんなお話を聞いた時に、Webデザインってそういうことを考えて設計するんだ!?と意表を突かれました。

Photoshopのお話

Photoshopをこう設定すると便利だよってお話からはじまりました。

自分は画像編集と言ったらPixelmatorを持っているぐらいで、Photoshopというプロが使うツールを一度も使ったことも見たこともありません。

そんな自分が聞いて大丈夫なのかということがありましたが、

その実演で実際に触ってる画面を見ると何をどうしているのかかろうじてわかることができました。

木目の柄を背景に使うために、貼る作業はとても勉強になりました。
反転したりすることでつなぎ目をなくすことができるんですね!

「Hexy」というものは、色をピックアップしたら、自動的にカラーコードをクリップボードに行ってくれて、
スッと、貼り付けることができる

これはCSSを書いたりする時にとても便利だなあと思いました。

マルチデバイス対応のお話

スマホ用サイトを用意するのと、レスポンシブにするのと、

どう違って、どちらがどういいのかのお話はとても勉強になりました。

スマホ用サイトを用意する形は、更新する時や変更する時にふた手間かかってしまうので、そこでレスポンシブの登場という感じなんですね。

と、この先に驚くお話がありました。

「Retina対応」

Retina用に画像を用意して、Retinaで見た時は高解像度の画像にするというRetina対応は、全く知らなかったので驚きの内容でした。

その辺りを、ぜひやってみてできるようにしておきたいです。

viewportの設定はついつい後回しにしてしまいそうなので、これもしっかりと頭に入れておきたいです。

WordPress導入のお話

スライド出してさらっと飛ばしてしまう感じが面白かったです。。

確かに最初はデータベースという存在になんなの!?ってなってしまいそうです。

デザイン上達のお話

なんでもデザイン的な目で見る

いろんなものやら看板を、なぜこう言うデザインなのか見る習慣をつけるのがいいそうです。

次はトレースして、上から真似していくというのはいい身につけ方だなぁと思いました。

INBOARDにストックするということをしたことがなかったので、やってみようかな

あとは、アウトプットすること、そして意見をもらうこと、このことには正にそうだなと思いました。

人からの意見は貴重。そう重んじながら学んでいこうと自分は思いました。

自分よりも年数の多いい先輩の人に厳しく意見をもらうのが一番効くというお話もしてました。

最後の挨拶

まとめ

今回はデザイン重視のお話でしたが、とても勉強になることが盛りだくさんでした!

お話を聞けて本当に良かったです!

これから頑張ろうそう思いました!

今回のお話を聞いて、ますますこの本を買って勉強したくなりました。

余裕ができ次第必ず買って勉強させてもらいます!

おまけ 頂き物

よく話を聞いてなかったので、よくわからないものですが、きっと前あったWordCampの余り物だと思います。

結構いいものでしたので、頂けて大満足です!

WordCampのカバン

WordCampのカバン

WordCampのカバン2

この袋に入っているのは?

この袋に入ってるものは?

サングラスでした!

どこで使おうか・・・

しかし、WordPressとロゴが入ってるので、飾るのに良さそうです!

WordPressのサングラス

シールたち

シールたち

真ん中にある紙のシールは貼るのが難しそうです。
裏には貼り方がしっかりと書いてありました!

裏には貼り方は

ということで、今回は参加して本当に良かったというお話でした!!

関連記事


投稿者プロフィール

ryoraspp
ryoraspp通信の短大生
統合失調症と睡眠障害とRLSを治療しながら、通信制の大学と英会話で英語を学んでる大学生。
2016年セブ島へ1ヶ月語学留学してきた。
ジャズトランペットとガジェット関連が好きです。
WordPress関連を勉強してます。

Mac/iPadPro9.7/iPhone5s/pebble/Nexus7/XperiaZ1

[ 最近のWordPressコミュニティでの活動 ]
2017 WordFesNagoya 実行委員 Webサイト制作チーム & セッションスピーカー
2016 WordFesNagoya 実行委員 Webサイト制作チーム & セッションスピーカー

この記事が気に入ったら
いいね ! しよう

Twitter で