茶鏡のブログ

HTMLコーダーが文句ばっかりぐちぐちぐちぐち言う日記です。

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

好きなことをひとり語りするために、軽い気持ちでMediumはじめてみたよ。

Mediumをはじめました

今をときめいてるかどうかわかりませんが、MediumでF1ファン珍道中なブログをはじめました。 私のアカウントはコチラです。ご興味ある方はご笑覧ください。いつやめるかは未定です。F1はなんでもありだから。 https://medium.com/@skgm26

Medium開設の目的

私はF1ファンですがとても弱気です。ツイッターなどで勝手に騒ぐくせに「フォロワーさんに迷惑かけてないかな…」と弱気になるF1ファンが、誰にも迷惑かけずにF1語りができる場所を求めており、これちょうどいいんじゃね始めてみようというのがきっかけでした。このブログでもF1ネタを取り扱ったことがありますがブログの存在意義がぶれそうだったのでやめました。

Mediumのざっくりした特徴

ちょっと違っていたり間違っているかもしれませんが…

  • ユーザー個人のブログとしても使うことができるし、複数のユーザーでパブリケーション(Medium内の雑誌)を作ることができる。例:Medium 日本語オフィシャルパブリケーション 

  • パブリケーション、ユーザー、タグ(記事にタグ付けができる)をフォローすると、タイムラインに表示されるようになる。

  • フォロイーの書いた記事だけでなく、フォロイーの「おすすめ記事」もタイムラインに流れる。

  • ツイッターなどでシェアすることができるが、ハートボタンをポチンと押すだけで「おすすめ」できる。記事におすすめされた数が表示される。Medium内のタイムラインで読んでもらうにはおすすめが大事。

  • まだローカライズが発展途上。トレンドもまだ英語。

  • 公式さんのこんな強気なエントリーも!→あなたの会社がMediumでブログを始めるべき理由

  • 意識高いユーザーが多い

そんなんしらんがな

勢いだけで作ってみたのはいいけれど、どうもnoteとごっちゃにしていたようで、フタを開けると意識の高い記事ばかりで面食らいました。

初心者は日本語の公式アカウントをフォローすると、使いどころなどを教えてくれるのでよいかとおもいます。(私も何故かおすすめされました。ハズカシー!)ユーザーが増えてくると記事も玉石混交となりそうですが、おすすめの数という独自の指標もあるし、もしかしたら公認アカウントやプレミアム会員とかも出てきたりして、質の低い記事は淘汰されていく仕組みになるのではないかと思います。

タイムライン、フォローする、などの概念があるので自サイトやブログのように完全な離れ小島にもならず、「もしかしたら見てくれる人がいるかも…」と寂しくなりません。

だから勝手に一人好きなことを語るには、ちょうどいいんじゃね?と思うております。ありがたいことにフォローしてくれる方がいらっしゃいました!

今は日本語記事は「Japanese」タグをつけたほうが良いとのことで私も付けており、お目汚ししておりますが、付けなくても良くなる時はまもなく来るでしょう。さあ意識の高いユーザーだけでなく意識の低いユーザーよあつまれ〜〜〜。F1ネタは英語記事でも少ないのでもっと書いてくれ〜〜。

参考文献

Mediumでコンテンツ配信して気づいたこと:could

会社「ディレクターになりなさい」

こちらは、会社員 Advent Calendar 2015の21日目です。昨年に引き続き、参加させていただきました。

私の仕事

広告の企画制作のデザイン事務所でなんちゃってWebデザイナーをしています。
社員約10人のうち、唯一Webデザイナーの肩書を与えられていますが、デザインはほぼしておらずコーディングをしております。ワイヤーフレーム描いたり見積もりも作ります。昨年から一定期間いたもう1名のWebデザイナーが退職されたため、再びぼっちです。

前職もコーダーで、グラフィック中心のデザイン事務所でバイトしていたら紆余曲折を経てコーダーになっていました。

最初に申し上げますが、あまりポジティブな話ではありませんが、今年の振り返りをしたいと思います。

続きを読む

グラフィックからデザインに入った人がWebデザインするなら、UIの勉強って必要?

グラフィックデザイナーばかりの会社でコーディングをしておりますが(エセWebデザイナーと言ってるのは会社名刺の肩書がWebデザイナーだから)、デザイナーから「いくら参考サイトを見ても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はグリッドの設定ですので、サイドバーを非表示にするなどは、よしなにしてくださいませ。

Render Bootstrap as "small" layout when printing

OSXにrbenv入れようとして半日以上潰した話

※このポストに書かれている解決法は、自分が忘れないようにうろ覚えで書いているため、重要なことが抜けていたりする可能性があります。
思い出したりもう一度試した時に加筆していきます。

あらまし

「試験前になってしまうと掃除がしたくなるあれ」になってしまったようで、コーディングをはじめなければならないのに、環境をいじくってしまい半日以上潰してしまいました。

半日以上潰した罪状をここに書き遺します。

ここでおすすめ本!

Development Environments for Web Designers

この本は本当にありがたい本。また感想を記事にしたいくらい、むっちゃおすすめです!

Webサイト制作の時流に乗り遅れないために、覚えておきたい開発環境の作り方…という、こもりまさあきさんの本です。(まだまだ、執筆中とのこと!)とても簡単に言うと、ウェブデザイナーのための黒い画面とその周りのツールの指南書です。

なにがすごいかというと、UNIXの基本的なコマンドから始まり、Web制作で「よくわからないけど何故か登場してしまう」「気になるけど難しそう」なツールの使い方やインストール方法を網羅しています。

このポストで「Bundlerってなんじゃい!」となってますが、他のツールを使うためによくわからないままなんとなく導入している、ということはあまり健全ではないです。とはいうものの調べようとすると開発者向けの記事にたどり着き、結局ツールの魅力や骨子がわからなかったりします。 知識がいい加減な私にとっては「あ〜〜〜そういうことだったのね」が満載であります。 電子書籍ですが、iPadKindleを持っていなくても読めます。

やりたいこと

本を参考にしつつ、 Mac OSX 10.6.8 (古い)に、rbenv (Rubyのバージョンを切り替える)を導入します。
マシン買ってほしいなぁ。

続きを読む