Not A Programmer のメモ帳: 11月 2013

2013年11月30日土曜日

Googleフォントでどのフォントが人気かが分かる・「Google Fonts :Analytics」 http://kachibito.net/useful-resource/google-fonts-analytics

Google Fonts Analytics Google Fonts AnalyticsはGoogleフォントでホスティングされているフォントで、どれが人気なのかが分かるツール・・・ツールではなく公式の機能ですが、今日 [...]

Post by かちびと.net

PR:WPデザインギャラリー

Google Web FontのフォントをCSS3で装飾した状態で確認出来る・Best Google Web Fonts

[書評]SEMのプロフェッショナルが著者の「Google Analytics 実践テクニック」

アイコンフォントを Google Web Fontsライクに使えるようにする為のオープンソースプロジェクト・We Love Icon Fonts

参照元記事：かちびと.net http://kachibito.net

シンプルで丸みのあるデザインのアイコンセット・「IKONS」 http://kachibito.net/useful-resource/ikons

IKONS IKONSはシンプルで丸みのあるデザインが可愛らしいアイコンセット。個人でも商用でも著作権表示不要で利用可能との事ですがご利用の際はご確認下さい。200以上のアイコンと、様々なフォーマットのデータも含まれてい [...]

高級感を感じる配色やデザインについて、色々なサイトを参考にして考えてみました。 http://handywebdesign.net/2013/11/about-design-in-a-classy-website/

このブログは配色やデザインについて個人的に気付いたことを書くことが多いですが、そういえば高級感に関するまとめってしてないかも？と思って今回はこのテーマで記事を書いてみようと思います。高級感を打ち出したサイトは、業種に限ら […]

参照元記事：Handy Web Design http://handywebdesign.net

2013年11月29日金曜日

ワンランク上のHTMLコーディングを行うための18のポイント http://sogitani.baigie.me/2013/11/html_step_up/

HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。ターゲ...さらに見る

参照元記事：sogitani.baigie.blog http://sogitani.baigie.me

2013年11月28日木曜日

プロが教える。SEOに強くなりたい人は読むべき、Google公式ドキュメント＋SEOブログ http://www.find-job.net/startup/seo-blog-pro-recommend

「SEOの正しい情報ソースはどこか？」ネット上で話題になるSEO記事の中には、誤っている情報が、あたかも正しいかのように書かれていたりします。ただその真偽はその道のプロじゃないと見分けが付きにくいですよね。。そこで今回の記事では、SEO業界でも有名なアユダン [...]

参照元記事：Find Job ! Startup http://www.find-job.net/startup

2013年11月27日水曜日

Webディレクターが選ぶ。今年利用して本当によかったGoogle Chrome拡張機能まとめ【2013年版】 http://www.find-job.net/startup/ga_extention

今回はディレクターやウェブ担当者の方に必ず入れておいていただきたいGoogle Chromeの拡張機能を厳選！数えきれないほどのChrome拡張機能から、特にGoogleアナリティクスの機能拡張とサイト解析・分析などの運用フェーズで便利なものにフォーカスして [...]

参照元記事：Find Job ! Startup http://www.find-job.net/startup

2013年11月26日火曜日

YouTube埋め込み時に便利なパラメータ 10＋ http://www.nxworld.net/tips/youtube-player-parameters.html

YouTube埋め込み時に便利なパラメータ 10＋

サイトにYouTube動画を表示したいと思った時、イベントを絡めるといったようなカスタマイズをしてとかになるとAPIを使用したりになると思いますが、とりあえず表示するだけであればiframeで簡単に埋め込むことができます。そんな時に知っておくと便利なパラメータ10種類を自分が使用頻度が高いと思う組み合わせ3つと併せて紹介します。

参照元記事：NxWorld http://www.nxworld.net

クリック一つでVPN接続が可能なChrome拡張『Spotflux Safe Browsing』 http://kenz0.s201.xrea.com/weblog/2013/11/spotflux_safe_browsing_safe_browsing.html

『Spotflux Safe Browsing 』は通信内容やIPアドレスといったプライバシー情報の守秘を目的に公開されているVPNサービスのSpotflux が提供するGoogle Chromeのためのブラウザ拡張。

ブラウザにインストールするだけでVPNを介したブラウジングが可能になり、通信内容はすべてSSLで暗号化され、IPアドレスはSpotfluxが提供するものに即座に置き換わります。

インストール後デフォルトの状態でVPN接続がオンになり、ボタンをクリックして表示されるダイアログから接続を切断することが可能です。

再度接続するときはボタンをクリックするだけで接続状態に切り替わります。

さて、通常このようなVPNを使うためにはOSのネットワーク接続の設定を手動で弄るか、或いは専用のプログラムをOSにインストールした上でいちいち起動するなどの必要がありますが、これはブラウザ拡張として完結しているので何らOS本体に特別なプログラムをインストールする必要がないのがいいところです。

また、プロキシタイプのトンネリングではなくVPNなので、プロキシ特有の不安定さなどの問題が少ないのもメリットと言えます。

こちらのVPNはもちろんフリーで利用ができる上、スピード制限などもなく他の類似サービスと比べても相当パフォーマンスが高いと思います。

また、クリック一つで接続切り替えができる利便性も高く、一時的にトンネル接続をしたいようなケースにはもってこいの拡張機能です。

» Spotflux Safe Browsing

2013年11月25日月曜日

ドメイン限定の YouTube 動画が閲覧できるようになりました

参照元記事：Enterprise Blog - ??? http://googleenterprise-ja.blogspot.com/

知っておくと速い！CSS3に関する「便利」なまとめ

先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「… read more →

参照元記事：コムテブログ http://commte.net/blog

2013年11月23日土曜日

Twitter 人気のつぶやき 11/16～11/22 2013

WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこ [...]

参照元記事：Webクリエイターボックス http://www.webcreatorbox.com

2013年11月21日木曜日

Photoshopでファビコンを作成する方法

フォトショップでファビコンを作成する方法をご紹介します。

参照元記事：Web Design Library http://www.webdesignlibrary.jp/

Web制作の料金相場/早見表【2013年クラウドソーシング版】

「サイト制作を外注した時の金額はいくらなんだろう？」その相場を事前に知っているだけでも、仕事はスムーズに回ります。そこで今回は、ぜひ皆さんに知って頂きたいWeb制作の料金相場/早見表の「クラウドソーシング版」をまとめてみました。ぜひ一度目を通してみて頂けたら [...]

参照元記事：Find Job ! Startup http://www.find-job.net/startup

無料でYouTubeチャンネルを宣伝する「ファンファインダー」が凄い！

なにこれ……。超すごすぎて、涙で前が見えない！！ YouTubeが新機能「ファンファインダー」を公開しました。この機能を使えば、あなたのチャンネルの動画をYouTubeが自動で宣伝してくれます！ YouTubeがあなた […]

無料でYouTubeチャンネルを宣伝する「ファンファインダー」が凄い！は +PlusOneWorld の記事です。

関連記事

YouTubeチャンネル登録者を増やす！未登録向け紹介動画の設定方法

YouTubeチャンネルの登録者を増やすのに効果的なURLの作り方

YouTubeが「日本の政治チャンネル：選ぼう 2012」を開設

iPhoneで動画撮影とアップロードが出来る YouTube Capture の使い方

「YouTube One チャンネル」の公式解説ページ

YouTubeの動画にアノテーションを入れてチャンネル登録者を増やそう

参照元記事：+PlusOneWorld http://plus1world.com

弥生がネットサービス「やよいの白色申告オンライン」を発表、来年末まで無料提供

参照元記事：PC Online http://pc.nikkeibp.co.jp/

2013年11月20日水曜日

Webサイトのプロトタイプ制作に使える無料オンラインツール

Webサイトを制作する際に大切なものの多くは、制作開始する前の段階にあります。サイトの設計・計画がうまくいっていないサイトは、制作開始後、様々なトラブルに見舞われることでしょう…。ということで今回はモックアップ・プロトタ [...]

参照元記事：Webクリエイターボックス http://www.webcreatorbox.com

ヘキサゴンタイプのアイコン・UI素材 15

少し前から自分の中でプチブームだったのもあり、見つけてはメモしていたヘキサゴン（六角形）タイプのアイコンやUI素材のまとめです。ほとんどがSNS系アイコンだったり、デザインが苦手な人でもそこまで時間をかけずに作れそうな感じがするものなんですが、中には背景が少し凝ってる感じのものや何かとヘキサゴンシェイプを取り入れているUIなどもあります。

参照元記事：NxWorld http://www.nxworld.net

2013年11月19日火曜日

私がよく使っているウェブサイト作成に役立つChromeの拡張機能6選

個人的に良く使っているウェブサイト作成時に役立つChromeの拡張機能を紹介します。有名なものばかりだと思いますが、ひとつでも新しい発見があればうれしいです。

参照元記事：Webpark http://weboook.blog22.fc2.com/

ノンデザイナーでも分かった！色に関する基本と配色に困ったときの知識まとめ

先月、リーフレットを作ったときに「なぜか同じように印刷されない」とか、サイトを作るときにイメージが伝わりにくいと感じたことが多々ありました。で配色に関して勉強してみたんですが、基礎がダメだったんですね。基本をしっかり勉強… read more →

参照元記事：コムテブログ http://commte.net/blog

Web屋に朗報！Google Analyticsとスプレッドシート＆Excelでサイト分析を自動化する方法

今回はGoogleアナリティクスと連動して簡単に「見せるための表」を自動で出力できるスプレッドシート&Excelの活用法をご紹介。マクロもJSも分からない！という方にも安心の“コピペですぐに使える”サンプルソース付きです。 ■見出しインデックス【 [...]

参照元記事：Find Job ! Startup http://www.find-job.net/startup

2013年11月16日土曜日

フォントとしても利用可能な大量のフラットなアイコンを配布する・「Flaticon」

Flaticon Flaticonは大量のフラットなデザインのアイコンを配布するWebサイトです。アイコンフォントとしても利用可能でSVGやPNG、PSDファイルも同梱されています。かなりの数があるので覚えて置いて損は無 [...]

2013年11月15日金曜日

CSS3でストライプ付きの影を実現する

これ、なんかいいですね。応用が効きそうなのでメモ的にエントリーしておきます。 ↑ CSS3、やっぱりすごいなー。 :afterとかの使い所をやはりいつかまとめねば。 » CSS Dashed Shadow – CodePen

参照元記事：IDEA*IDEA http://www.ideaxidea.com

【新機能】管理画面内で A/B テストを設定し、収益性の高い広告設定を行いましょう

参照元記事：AdSense Blog-Japan http://adsense-ja.blogspot.com/

2013年11月13日水曜日

グリッドレイアウトを採用しているWebデザイン 40【国内】

プラグインに引き続きグリッドレイアウトネタ。自分が参考にしたい時に探す手間を省きたいのもあったので、グリッドレイアウトを採用している国内のWebデザインをまとめました。シンプルなものから動きに特徴があるものまで様々なタイプがあるので、デザインだけじゃなく何かと参考になります。

参照元記事：NxWorld http://www.nxworld.net

グリッドレイアウトを採用しているWebデザイン 40【海外】

引き続きグリッドレイアウトネタで、グリッドレイアウトを採用している海外のWebデザインのまとめです。ポートフォリオやギャラリー系のサイトが目立ちますが、国内以上に見せ方や動きなどが参考になるサイトが多いです。

参照元記事：NxWorld http://www.nxworld.net

2013年11月12日火曜日

ランディングページで効果的な動きを演出する jQueryエフェクト７つ＋１

ランディングページにjQueryで「ちょっとした動き」をつけることは、伝えたい情報の注目度を高めて確実に伝えられる、あるいは豊富な情報をスッキリと表現できる効果が期待できます。今回は、弊社のランディングページで採用している「ちょっとした動き」を制御するjQuery７つと、そのカスタマイズ方法を全て公開します。

参照元記事：LPO研究所 http://lpo.gaprise.com/blog

2013年11月11日月曜日

グリッドレイアウト採用時に便利なjQueryプラグイン 20

有名どころだとPinterestやBehanceなどで取り入れているような、グリッドレイアウトを簡単に実装できるjQueryプラグインのまとめです。少し前はポートフォリオのギャラリー部分などのような箇所で主に使われている印象が個人的にあったのですが、最近ではブログの記事一覧やECサイトなどでもよく見かけますし、コーポレートサイトのトップに採用しているサイトなども多く見かけます。基本的な動きは同じようなものでもサポートブラウザやアニメーションの有無などがプラグインによって違うので、自分の中で幾つか使いやすいものを見つけておくと良いと思います。

参照元記事：NxWorld http://www.nxworld.net

2013年11月7日木曜日

ドメイン内に制限された Google+ コミュニティ

参照元記事：Enterprise Blog - ??? http://googleenterprise-ja.blogspot.com/

GoogleがIE9のサポート打ち切り決定、Gmail・Googleカレンダー・Googleドライブなどに影響

Windows8.1と共にウェブブラウザ「Internet Explorer(IE)」も最新版の11がリリースされました。これに伴って、Googleは、GmailなどでのIE9のサポート打ち切りを決めました。 Google Drops Support for…

続きを読む...

参照元記事：GIGAZINE http://gigazine.net/

2013年11月5日火曜日

Freebie: 60 Flat and Long Shadow Social Media Icons

We have another amazing icon freebie for you today! Designed by Maksym Khomenko, the social media icon set contains a total of 60 popular social services, and comes in both flat & long shadow styles....

Freebie: 60 Flat and Long Shadow Social Media Icons

Free Icon Set for Designers – The Go Green! Icon Set (108 Icons)

Top 10 Christmas Social Bookmarking Icon Sets

25 Fresh Icon Sets for Web Designers

参照元記事：Speckyboy Design Magazine http://speckyboy.com

Web初心者だった私がWEBデザイナーになって1年半で勉強したこと・使用しているツールまとめ

プロフィールに記しておりますとおり、私は現在デザイン会社にて働いております。昨年の3月、5年ほどやっていた「DTP・グラフィックのデザイン・レイアウト業務」から「Web担当」に相なり、日々勉強しながら仕事に臨んでおると言 [...]

参照元記事：OZPAの表4 http://ozpa-h4.com

画像は使わない！文字を装飾するCSS／jsまとめ

画像を使うと変更がめんどう。出来ることならテキストで済ませたい。Webデザインはカーニングなどによる可読性の調整は難しいですが、CSSやjsを用いた簡単な指定で、文章の読みやすくしたり、注意をひくことが可能です。今回はC… read more →

参照元記事：コムテブログ http://commte.net/blog

2013年11月4日月曜日

Dreamweaverのコードヒントをカスタマイズする方法

Adobeのソフトで一番使ってるのはDreamweaverです@delaymaniaです。「d」と打てば「div」というヒントを出してくれて、エンターキー押すだけで入力できるコードヒント機能はめっちゃ便利ですよね。こ … Continue reading →

参照元記事：delaymania http://delaymania.com

バナーをデザインする時に役立つまとめ・記事10選

新人がデザインの業務で頼まれることが多いのばバナー。小さいので簡単と思われるけど、実はかなり難しく意外と制作に時間がかかるのがバナー。小さいけど、奥が深いのがバナー。そんなバナーを作るコツがわかる記事をご紹介！バ […]

参照元記事：FEVDES BLOG http://blog.idea-clippin.com

バナー制作時の文字の組み方のちょっとしたコツ

新人の頃、「クライアントに『自分でもつくれる』と思われたらダメ」とよく先輩に言われていました。クライアントから、「自分でもパワポやエクセルで作れそう」と思われるとデザイナーとして失格ということです。新人の頃は […]

参照元記事：FEVDES BLOG http://blog.idea-clippin.com

2013年11月3日日曜日

input要素に入力パターンを組み込めるjQueryプラグイン・formatter.js

地味に便利そうだったのでメモ。input要素に入力パターンを組み込める、というスクリプトです。jQueryに依存しています。ユーザーの入力の補助によさそう。 input要素に入力パターンを組み込めるスクリプトです。 fo [...]

Post by かちびと.net

PR:WPデザインギャラリー

input要素に長いテキストが入力された際、カーソルの位置を可視化するjQueryプラグイン

tableの列ごとに任意のキーワードでフィルタリングできる軽量jQueryプラグイン・Multifilter

:invalidや:valid擬似クラスを使ったフォームバリデーションエラーメッセージのスタイルサンプル