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はグリッドの設定ですので、サイドバーを非表示にするなどは、よしなにしてくださいませ。
OSXにrbenv入れようとして半日以上潰した話
※このポストに書かれている解決法は、自分が忘れないようにうろ覚えで書いているため、重要なことが抜けていたりする可能性があります。
思い出したりもう一度試した時に加筆していきます。
あらまし
「試験前になってしまうと掃除がしたくなるあれ」になってしまったようで、コーディングをはじめなければならないのに、環境をいじくってしまい半日以上潰してしまいました。
半日以上潰した罪状をここに書き遺します。
ここでおすすめ本！
Development Environments for Web Designers
この本は本当にありがたい本。また感想を記事にしたいくらい、むっちゃおすすめです！
Webサイト制作の時流に乗り遅れないために、覚えておきたい開発環境の作り方…という、こもりまさあきさんの本です。（まだまだ、執筆中とのこと！）とても簡単に言うと、ウェブデザイナーのための黒い画面とその周りのツールの指南書です。
なにがすごいかというと、UNIXの基本的なコマンドから始まり、Web制作で「よくわからないけど何故か登場してしまう」「気になるけど難しそう」なツールの使い方やインストール方法を網羅しています。
このポストで「Bundlerってなんじゃい！」となってますが、他のツールを使うためによくわからないままなんとなく導入している、ということはあまり健全ではないです。とはいうものの調べようとすると開発者向けの記事にたどり着き、結局ツールの魅力や骨子がわからなかったりします。 知識がいい加減な私にとっては「あ〜〜〜そういうことだったのね」が満載であります。 電子書籍ですが、iPadやKindleを持っていなくても読めます。
やりたいこと
本を参考にしつつ、
Mac OSX 10.6.8 (古い）に、rbenv (Rubyのバージョンを切り替える)を導入します。
マシン買ってほしいなぁ。
自分でもよくわかってない私の仕事について
こちら会社員 Advent Calendar 2014 の14日目です。
会社でWebの仕事ってどんなかかわりがあるのだろうと、ツイッターでウォッチングを告白したら、カナさんよりお誘いいただきました！ありがとうございます。
前日はnukusuさんです。大丈夫です、私なんて現職まで10年もフリーター＼(^o^)／
会社員 Advent Calendar 2014 - Webそしてnukusu。
今回は、自分でもなにしてるのかよくわかってない、仕事についてづらづら書きます。わかってないがゆえ長いです。
続きを読む