WordBench Nagoya 11月度のデザイナーさん必見の回の勉強会に参加してきました!

こんにちは。@ryorasppです。

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

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

Screenshot of wbnagoya.doorkeeper.jp

【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デザイナーをされてる方なのです!

Screenshot of 5dg.biz

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

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

内容

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

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

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

(個人的な主観です。)

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

基礎知識

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

配色のお話

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

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

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

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

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

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

Screenshot of color.adobe.com

カラーホイール | カラースキーム – 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のサングラス

シールたち

シールたち

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

裏には貼り方は

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

投稿者プロフィール

魚住諒
魚住諒
26歳 統合失調症の回復期の認知機能障害やうつ症状などに悩んでいるが、克服して、勉強や仕事ができる頃の脳に戻したい。
愛知産業大学短期大学通信教育学部国際コミュニケーション学科卒業(英語)
2016年セブ島へ1ヶ月語学留学してきた。
WordPress/PHP/HTML/CSS/React を習得中
英語とプラグインやテーマを開発できる人になるよう日々研鑽
ジャズトランペットとガジェット関連が好きです。

[ 最近のWordPressコミュニティでの活動 ]
contents.nagoya 2019 オープンセッションスピーカー
WordCamp Haneda 2019 – START!セッションスピーカー
Aichi WordPress Meetup #9「WordPress用のレンタルサーバーの選び方 /Emmetツールの実演」
WordBench Nagoya 6月度 (初心者向け)「PHP入門からテーマ作成さらにWordPressを使う上で知っておくと幸せになることまでとことん知ろう!
Aichi WordPress Meetup #5「カスタムブロックを活用してみよう!」
2017 WordFesNagoya 実行委員 Webサイト制作チーム & セッションスピーカー
2016 WordFesNagoya 実行委員 Webサイト制作チーム & セッションスピーカー

TOEIC
2016年03月13日 LR 235 (Listening 180 Reading 55)
2018年04月08日 LR 300 (Listening 180 Reading 120)