読者です 読者をやめる 読者になる 読者になる

さかがみのブログ

エセWebデザイナーが文句ばっかりぐちぐちぐちぐち言う日記です。

コミュ障がCoderDojoのメンターに挑戦してみた

勉強会

まずCoderDojoとはなんぞやかといいますと、子どものための「プログラミング道場」です!

Dojoにやってくる子どもたちは「ニンジャ」、ニンジャをサポートする大人は「メンター」といいます。

アウトライン

この記事はCoderDojo Advent Calendar 2016の18日目の記事です。
17日目はKenichi Wakabayashiさんが書きました。

私は今年の11月より地元のDojoでメンターとして参加しております。12月で2回目です!
ちなみにプログラミングはあまりできません。

この記事では コミュ障 の私がDojoのメンターに挑戦してみたきっかけや気づいたことを書きます。参加をためらっている方への一助になれば良いです。

あれです、コミュ障だって、CoderDojoに(何らかの形で)貢献したいんですよー!
子どもの頃ゲームプログラマーを夢見た身からしたら、どんなに素敵な活動か。

どのくらいコミュ障か

コミュ障と言ってもいろいろな方がおられますので私の例。もう帰れ言われそうなスペックですw

  • 勉強会の懇親会では必ず一人端っこの方で飲んでいる
  • 緊張しい、頭の回転遅い、すぐテンパる
  • 相手に怒られたり話が理解できないと、言葉が出なくなる。
  • 子ども、ちょっと苦手(どんなふうに接したらいいのかわからない)

「ニンジャやその保護者の方を不安な気持ちにさせてしまうんじゃないか」とメンターとして参加するにはためらいがありました。

続きを読む

Webの仕事をしていく、私のテーマ

よしなしごと

こんなことを夜中につぶやいた。

続きを読む

IllustratorでWebデザインだ!そしてデザイナーとの協業について考える

Web制作 勉強会

勉強会に行ってきた

広告デザイン事務所で、グラフィックデザイナーがイラレで作ったカンプを見て、さてコレをどうやって画像化してコーディングしようか…と悩む日々です。

とはいえ、私もWebデザインの正しいワークフローなんて知っているわけではありません。Fireworks?なにそれおいしいの?

Photoshopで作ってよ!と思ったりもしたところ、最近はそうでもなく、イラレでWebデザインするという流れができ始めているようです。

ただこの本を買ったんですけど正直ピンとこなかったんですよ。 Web制作者のためのIllustrator&ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術 Web制作者のための教科書シリーズ

俺たちのイラレで正しいWebデザインのワークフローをちゃんと勉強しようと、WordBench 奈良〜Illustratorデザインからテーマ作成 & おしえて!デザイン 奈良編〜に行ってきました。

その感想と今後どうして活かしていきたいかを書こうと思います。かなり個人的な意見や感想になります。

勉強会の先生は川井昌彦さんです。30分で熊本地震の支援サイトを立ち上げられた方だ!

続きを読む

WordCamp Kansai 2016に行ってきました。

勉強会

とっても久しぶりにWordCamp。

寝坊はするし、電車は乗り間違えるしで散々な幸先でしたが、参加できる企画満載、お久しぶりな方にご挨拶出来たり、なによりあたたかな雰囲気で、勉強会や祭りが苦手な私でもリラックスして楽しむことができました!
実行委員の方々の挨拶が気持ちよいし、託児所は神対応だなと思いました。

もくじ

  • 当日聞いたセッション
  • WordPress
  • CMSはだれのためのもの?
  • その他、感じたこと(ツイート集)
続きを読む

codecademyをやってみた感想

いただく案件は大きいサイトが多く、ディレクターがバタバタしている横で、私は悲しいことに社内ニートです。「誰か手伝えよ」と言われても、エセデザイナーにできることはそうなく……となればおとなしく勉強がいちばんです。

勉強できるサイトはドットインストールCODEPREPがあるのですが、今回Codecademyをやってみてなかなかいいぞと思ったので感想を書きます。

文章のみで魅力を紹介するのはかなり難しいのですが……詳しい画面と説明は、こちらの記事にあずけます。
www.miraidenshi-tech.jp

今回はPHPをやってみました。

実行環境や課題を用意するのが面倒くさいという方にぴったりです。全部英語ですがなんとかなりました。後で日本語の解説書を読むと理解の一助となるかもしれません。

基本的にドリル形式で進みます。真似をするのではなく自分でコードを書かなければなりません。なかにはおさらいテスト的な問題もあり、ヒントが無いものもあります。「解説を読んで、課題は自分でコードを書く」は実践的です。画面内の小窓で即実行結果やエラーが分かるので「なんでうごかないんだよ!」にあまりならないので親切です。詰んでしまい検索してカンニング何度もしました

ループ文や関数のあとに、オブジェクト指向プログラミングをやりまーすとなって、うおおおできるんか私に〜?!(しかも解説は全部英語なのに)

今まで本とかを読んでも、オブジェクト指向プログラミングがさっぱり理解できなかったのですが、ステップを踏んで少しずつ課題を解いていくことで、ほんの少しだけ理解することができました。
話がPHPからそれますが、そういえばjQueryプラグインなんかもそういう書き方しているのが多いなと思ったので、案件でカスタマイズしたりするのに覚えておいたほうがいいなあと思いました。Javascriptの講座にもあるようですのでやってみよう。

すこしずつやってみてクリアした達成感は半端無かったです。ちょっとかじった人(で私のようになかなか覚えない)が勉強するための課題のバランスがちょうどいいのだなと思いました。0からはじめる人にはややスパルタに感じるかも。

あとは実践あるのみ

ってブログを書くんじゃなくて、せっかくPHPの基本を学んだのだから、解説書読んだり写経とかせんかい。という話です。忘れないうちに暇を見つけて勉強を続けます。

理解を深めようとはてブった記事をはっときます。

www.atmarkit.co.jp オブジェクト指向プログラミングについての解説。書ける人向けだったので余計わからなくなった…

www.kaasan.info メールフォームつくれるようになりたい!と思って読んだら手練の方でもフォームって難しいみたい…

Webの仕事はくじけることばかりで、リタイアしようかなとついつい思ってしまいますが、がんばりますよ〜(弱気)

JS道場に通って覚えたこと。

勉強会

f:id:skgm26:20160331115444p:plain

デジハリ大阪校さんの連続もの勉強会、かみやん先生の「JS道場」に行ってきました。
本やネットで得た知識でコピペしつつのこんなJSとか書いてるわけですが、正直、コピペ、卒業したいっす。私はコピペプログラミングですが、初学者の方も結構いらっしゃった印象でした。

作ったものはこちら!毎回教材を用意してくださりJSの部分をみんなで書いていくというスタイルでした。

  • スライドショー
  • モーダルウインドウ
  • 無限スクロール
  • パララックス
  • ドロワーメニュー

ここでは道場で覚えた、主に実装の考え方の部分を書きたいと思います。

続きを読む

WordBench奈良 〜アイキャッチを使ってWordPressに表示しよう〜 にいってきました。

デザイン 勉強会

f:id:skgm26:20160213195355j:plain

コーダーの仕事がメインとなりデザインからは遠ざかり、特にWebデザインに関しては不勉強きわまりなく、で参加いたしました。上の画像はワークショップで作った「アイキャッチ」です!

このアイキャッチのイラストはいらすとや様のイラストを使用、写真はゆんフリー写真素材集様のものを使用しています。Photo by (c)Tomo.Yun

広告バナーとアイキャッチの違い

  • 広告バナー…見ている人の関心を、視覚的に引き寄せる。目立たせる。
  • アイキャッチ…見ている人の関心に対して、文章のみでは伝えづらいことを視覚的に訴えかける

広告は「こんなのあるよ!詳しくはこちら!」と訴えかけているのに対し、アイキャッチは「この文章の内容はこういうことです」と説明するものです。

Facebookなどでシェアした時、何もしなければ記事内で使用されている画像が表示されますが、簡単な概要を示すアイキャッチがある方が読む前に「こんな記事だよ」とわかり読んでもらえる確率が上がりそう。

前回書いたMediumのパブリケーションも、アイキャッチ画像が効果的に使われるレイアウトになっています。例:日本語公式パブリケーション

コンテンツの一部、とは少し違う役割を持つアイキャッチ、そういうことを考えるのも、Webメディアならではの制作物かもしれません。

アイキャッチづくりに挑戦!

先生のYATさんから「東大寺」のお題をいただき作成しました。

  • 「コレをして見づらくならないか?」を考えながら作る
  • 色数を抑えてレイアウトを考えるだけでも、かなり見やすくなる!

という教えを意識して、作成しました。色を先に3色ぐらい決めてしまうのはスピードアップのテクニックですね。補正の質問をしたときに「色を合わせるといいよ」と教えていただきました。欲張って若草山の緑を入れなくてよかったです。

最初にキャッチコピーから考え、大仏さんと奈良はセットで言われるけど、東大寺に大仏さんがいはることを知らない人がいるんじゃ…とイメージをふくらませていきました。ターゲットは「初めて奈良に訪れる、ことりっぷで予習する若い女の子」です!

ところで、コレは「東大寺」について書かれた記事のアイキャッチとしてはどうなのでしょうか。「初めて奈良に訪れる人向けに書かれた記事の説明」であることを考えると、インパクト勝負というか、広告よりだったかも……でも広告はコピーを下には置かないな…ムムム…。
作ることに熱中して「アイキャッチである」という想像をするのをすっかり忘れていました。ナイショですが、コピー→ビジュアル→ターゲットと何か作る順番を間違えてました。

参加者のみなさんの作品を見ていると、上手い下手よりも、ターゲット、写真、素材など「これ行きたくなるなぁ」「わかりやすい!」「そう来たか」と思わせる選定が色々で印象的でした。例えば海外のお客さん向けなら私はどうやって作るだろうかと。でもやっぱりデザイナーさんは上手!

最後、みんなの前で発表をしたのですが「言いたいことがよく分かる」と評してもらえてよかったです。

今度からこのブログにもアイキャッチを取り入れてみようと思います。技術ネタの時どうするねん…。

参考文献

配色を考えやすくするための様々なルール – YATのBLOG