codecademyをやってみた感想
いただく案件は大きいサイトが多く、ディレクターがバタバタしている横で、私は悲しいことに社内ニートです。「誰か手伝えよ」と言われても、エセデザイナーにできることはそうなく……となればおとなしく勉強がいちばんです。
勉強できるサイトはドットインストールやCODEPREPがあるのですが、今回Codecademyをやってみてなかなかいいぞと思ったので感想を書きます。
文章のみで魅力を紹介するのはかなり難しいのですが……詳しい画面と説明は、こちらの記事にあずけます。
www.miraidenshi-tech.jp
今回はPHPをやってみました。
実行環境や課題を用意するのが面倒くさいという方にぴったりです。全部英語ですがなんとかなりました。後で日本語の解説書を読むと理解の一助となるかもしれません。
基本的にドリル形式で進みます。真似をするのではなく自分でコードを書かなければなりません。なかにはおさらいテスト的な問題もあり、ヒントが無いものもあります。「解説を読んで、課題は自分でコードを書く」は実践的です。画面内の小窓で即実行結果やエラーが分かるので「なんでうごかないんだよ！」にあまりならないので親切です。詰んでしまい検索してカンニング何度もしました
ループ文や関数のあとに、オブジェクト指向プログラミングをやりまーすとなって、うおおおできるんか私に〜？！（しかも解説は全部英語なのに）
今まで本とかを読んでも、オブジェクト指向プログラミングがさっぱり理解できなかったのですが、ステップを踏んで少しずつ課題を解いていくことで、ほんの少しだけ理解することができました。
話がPHPからそれますが、そういえばjQueryのプラグインなんかもそういう書き方しているのが多いなと思ったので、案件でカスタマイズしたりするのに覚えておいたほうがいいなあと思いました。Javascriptの講座にもあるようですのでやってみよう。
すこしずつやってみてクリアした達成感は半端無かったです。ちょっとかじった人（で私のようになかなか覚えない）が勉強するための課題のバランスがちょうどいいのだなと思いました。0からはじめる人にはややスパルタに感じるかも。
あとは実践あるのみ
ってブログを書くんじゃなくて、せっかくPHPの基本を学んだのだから、解説書読んだり写経とかせんかい。という話です。忘れないうちに暇を見つけて勉強を続けます。
理解を深めようとはてブった記事をはっときます。
www.atmarkit.co.jp オブジェクト指向プログラミングについての解説。書ける人向けだったので余計わからなくなった…
www.kaasan.info メールフォームつくれるようになりたい！と思って読んだら手練の方でもフォームって難しいみたい…
Webの仕事はくじけることばかりで、リタイアしようかなとついつい思ってしまいますが、がんばりますよ〜(弱気)
WordBench奈良 〜アイキャッチを使ってWordPressに表示しよう〜 にいってきました。
コーダーの仕事がメインとなりデザインからは遠ざかり、特にWebデザインに関しては不勉強きわまりなく、で参加いたしました。上の画像はワークショップで作った「アイキャッチ」です！
このアイキャッチのイラストはいらすとや様のイラストを使用、写真はゆんフリー写真素材集様のものを使用しています。Photo by (c)Tomo.Yun
広告バナーとアイキャッチの違い
- 広告バナー…見ている人の関心を、視覚的に引き寄せる。目立たせる。
- アイキャッチ…見ている人の関心に対して、文章のみでは伝えづらいことを視覚的に訴えかける
広告は「こんなのあるよ！詳しくはこちら！」と訴えかけているのに対し、アイキャッチは「この文章の内容はこういうことです」と説明するものです。
Facebookなどでシェアした時、何もしなければ記事内で使用されている画像が表示されますが、簡単な概要を示すアイキャッチがある方が読む前に「こんな記事だよ」とわかり読んでもらえる確率が上がりそう。
前回書いたMediumのパブリケーションも、アイキャッチ画像が効果的に使われるレイアウトになっています。例：日本語公式パブリケーション
コンテンツの一部、とは少し違う役割を持つアイキャッチ、そういうことを考えるのも、Webメディアならではの制作物かもしれません。
アイキャッチづくりに挑戦！
先生のYATさんから「東大寺」のお題をいただき作成しました。
- 「コレをして見づらくならないか？」を考えながら作る
- 色数を抑えてレイアウトを考えるだけでも、かなり見やすくなる！
という教えを意識して、作成しました。色を先に3色ぐらい決めてしまうのはスピードアップのテクニックですね。補正の質問をしたときに「色を合わせるといいよ」と教えていただきました。欲張って若草山の緑を入れなくてよかったです。
最初にキャッチコピーから考え、大仏さんと奈良はセットで言われるけど、東大寺に大仏さんがいはることを知らない人がいるんじゃ…とイメージをふくらませていきました。ターゲットは「初めて奈良に訪れる、ことりっぷで予習する若い女の子」です！
ところで、コレは「東大寺」について書かれた記事のアイキャッチとしてはどうなのでしょうか。「初めて奈良に訪れる人向けに書かれた記事の説明」であることを考えると、インパクト勝負というか、広告よりだったかも……でも広告はコピーを下には置かないな…ムムム…。
作ることに熱中して「アイキャッチである」という想像をするのをすっかり忘れていました。ナイショですが、コピー→ビジュアル→ターゲットと何か作る順番を間違えてました。
参加者のみなさんの作品を見ていると、上手い下手よりも、ターゲット、写真、素材など「これ行きたくなるなぁ」「わかりやすい！」「そう来たか」と思わせる選定が色々で印象的でした。例えば海外のお客さん向けなら私はどうやって作るだろうかと。でもやっぱりデザイナーさんは上手！
最後、みんなの前で発表をしたのですが「言いたいことがよく分かる」と評してもらえてよかったです。
今度からこのブログにもアイキャッチを取り入れてみようと思います。技術ネタの時どうするねん…。
参考文献
好きなことをひとり語りするために、軽い気持ちでMediumはじめてみたよ。
Mediumをはじめました
今をときめいてるかどうかわかりませんが、MediumでF1ファン珍道中なブログをはじめました。 私のアカウントはコチラです。ご興味ある方はご笑覧ください。いつやめるかは未定です。F1はなんでもありだから。 https://medium.com/@skgm26
Medium開設の目的
私はF1ファンですがとても弱気です。ツイッターなどで勝手に騒ぐくせに「フォロワーさんに迷惑かけてないかな…」と弱気になるF1ファンが、誰にも迷惑かけずにF1語りができる場所を求めており、これちょうどいいんじゃね始めてみようというのがきっかけでした。このブログでもF1ネタを取り扱ったことがありますがブログの存在意義がぶれそうだったのでやめました。
Mediumのざっくりした特徴
ちょっと違っていたり間違っているかもしれませんが…
ユーザー個人のブログとしても使うことができるし、複数のユーザーでパブリケーション(Medium内の雑誌)を作ることができる。例：Medium 日本語オフィシャルパブリケーション
パブリケーション、ユーザー、タグ（記事にタグ付けができる）をフォローすると、タイムラインに表示されるようになる。
フォロイーの書いた記事だけでなく、フォロイーの「おすすめ記事」もタイムラインに流れる。
ツイッターなどでシェアすることができるが、ハートボタンをポチンと押すだけで「おすすめ」できる。記事におすすめされた数が表示される。Medium内のタイムラインで読んでもらうにはおすすめが大事。
まだローカライズが発展途上。トレンドもまだ英語。
公式さんのこんな強気なエントリーも！→あなたの会社がMediumでブログを始めるべき理由
意識高いユーザーが多い
そんなんしらんがな
勢いだけで作ってみたのはいいけれど、どうもnoteとごっちゃにしていたようで、フタを開けると意識の高い記事ばかりで面食らいました。
初心者は日本語の公式アカウントをフォローすると、使いどころなどを教えてくれるのでよいかとおもいます。（私も何故かおすすめされました。ハズカシー！）ユーザーが増えてくると記事も玉石混交となりそうですが、おすすめの数という独自の指標もあるし、もしかしたら公認アカウントやプレミアム会員とかも出てきたりして、質の低い記事は淘汰されていく仕組みになるのではないかと思います。
タイムライン、フォローする、などの概念があるので自サイトやブログのように完全な離れ小島にもならず、「もしかしたら見てくれる人がいるかも…」と寂しくなりません。
だから勝手に一人好きなことを語るには、ちょうどいいんじゃね？と思うております。ありがたいことにフォローしてくれる方がいらっしゃいました！
今は日本語記事は「Japanese」タグをつけたほうが良いとのことで私も付けており、お目汚ししておりますが、付けなくても良くなる時はまもなく来るでしょう。さあ意識の高いユーザーだけでなく意識の低いユーザーよあつまれ〜〜〜。F1ネタは英語記事でも少ないのでもっと書いてくれ〜〜。
参考文献
会社「ディレクターになりなさい」
こちらは、会社員 Advent Calendar 2015の21日目です。昨年に引き続き、参加させていただきました。
私の仕事
広告の企画制作のデザイン事務所でなんちゃってWebデザイナーをしています。
社員約10人のうち、唯一Webデザイナーの肩書を与えられていますが、デザインはほぼしておらずコーディングをしております。ワイヤーフレーム描いたり見積もりも作ります。昨年から一定期間いたもう1名のWebデザイナーが退職されたため、再びぼっちです。
前職もコーダーで、グラフィック中心のデザイン事務所でバイトしていたら紆余曲折を経てコーダーになっていました。
最初に申し上げますが、あまりポジティブな話ではありませんが、今年の振り返りをしたいと思います。
続きを読むBootstrap(Ver.3) のこまかーいこわざ覚書
かなりお久しぶりです。
Bootstrapも、もうVer4ですけれども、えーいこちとらIE8対応せにゃあかんのじゃーということで、案件で使った本当に細かい小技を覚書としてご紹介します。
BootstrapのいいところはJavascriptが強力で、説明書にないことしたくなってもある程度対応できるところですねぇ。また思い出したら書きたいとおもいます。
リンク先の特定タブを開かせる
なんだか日本語になっておりませんが、「このリンクおした時だけ、hogeページにある(初期状態は#TabAがアクティブな)タブ#Tabの#TabBをアクティブにしたい」というときに使います。
HTML リンクを設置するページに
<a href="hoge.html#TabB">TabBひらいて！</a>
JS タブ#Tabが設置されたhogeページに書きます
$(function(){ var TargetTab = location.hash; if (TargetTab == "#TabB"){ $("#Tab a[href='#TabB']").tab('show'); location.hash = ''; } else{return false;} });
ドロップダウンメニューが開いている時だけ周りを暗くしたい
これはメガドロップダウンメニューを使う時であるかもしれません。
HTML ページの下の方に設置
<div id="Cover" class="CoverBg"></div>
CSS
.CoverBg { width: 100%; height: 100%; /*背景画像の設定はおこのみで*/ background: transparent url("img/bg_cmn_dropdown.png") repeat scroll center center; /*他のJSやCSSの設定に応じてz-indexを設定してください。*/ z-index: 200; position: fixed; top: 0px; left: 0px; display: none; }
JS
$(.dropdown').on('shown.bs.dropdown',function(){ var BodyHeight = $("body").height(); //Get Header Height $("#Cover").css("height",BodyHeight); $("#Cover").stop().show(); }); $('.dropdown').on('hidden.bs.dropdown',function(){ $("#Cover").stop().hide(); }); $("#Cover").click(function(){ $('.dropdown-toggle').dropdown(); });
Bootstrapで印刷対応する（ざっくり編）
そんなむちゃくちゃな…という話ですが、ざっくりと紹介します。というよりは、gistの紹介ですねぇ〜^^。
Bootstrapのプリントの設定を外す
デフォルトのままでは白地に黒になってしまうので外します。これはBootstrap-Sassを使っているとやり方によって違うのですが、ダウンロードしてつかう場合は「Customize」のところで「Print media styles」を外すと行ける気がします。
印刷用CSSを作る
私は下記gistを参考にしました。「small表示の時の状態でプリントする」設定です。
パソコン表示にしたかったので、これをほぼそのままコピペして、sm になっているところを md に変えます。
このgistはグリッドの設定ですので、サイドバーを非表示にするなどは、よしなにしてくださいませ。
