もうCSS設計で悩まない！「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -

2013/09/12 930 users プロパティ コーディング規約 規模 構造 ルール

構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディング ガイドライン」策定のための参考記事を紹介します。 チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。 コーディング規約を作ろう "制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボッ... 続きを読む

心優しきSEM/SEOに携わる方に贈る！リスティング広告のURLの仕組み / SQUEEZE - Web Design Studio -

2013/09/09 20 users SEM-LABO SEM 発端 Twitterアカウント 発想

SEM、SEOに携わる方のツイート見ていたら気になったので、僭越ながらリスティング広告のURLの仕組みを簡単に解説します。 話の発端 Web業界向けのとあるイベントのtwitterアカウントが「リスティング広告はどんどんクリックしよう」というツイートをしたことに対して、@semlaboさんが 『「リスティング広告はどんどんクリックしよう」という発想は間違っている。 | SEM-LABO』というブロ... 続きを読む

【Ninja】jQueryとCSS3アニメーションで作る何度もクリックしたくなる「ページトップ」ボタン / SQUEEZE - Web Design Studio -

2013/09/09 116 users Squeeze スクロールアニメーション Ninja 何度

前回の記事『Webデザインの参考にしたい遊び心あふれる「ページトップ」ボタン9個』にならって、jQueryとCSS3アニメーションを使って遊び心あふれる何度もクリックしたくなる「ページトップ」ボタン作成してみました。 Ninjaページトップボタン ブックマークバーとスクロールアニメーションを活かしたページトップボタンにしてみました。サンプルページをご覧ください。 サンプルページ » 忍者登場はCS... 続きを読む

Webデザインの参考にしたい遊び心あふれる「ページトップ」ボタン9個 / SQUEEZE - Web Design Studio -

2013/09/06 37 users 遊び心 JTB Tokyo Squeeze ページ上部

Webサイトを閲覧中に、ページ上部に戻るための「ページトップ(スクロールトップ)」ボタン。ページの機能としての重要性は低く、あまり目立たない(目立たせない)ものです。そんな中でも、おっと思わせる遊び心のあふれる「ページトップ」ボタンをご紹介します。 ページトップ(スクロールトップ) ボタン 女子旅つくるプロジェクト｜JTB × KOBE COLLECTION / TOKYO RUNWAY http... 続きを読む

【jQuery】ブックマークレットの登録を分かりやすく案内する方法を考えてみた。 / SQUEEZE - Web Design Studio -

2013/09/05 15 users Squeeze 画面キャプチャ jQuery 文章 ボタン

ブックマークレットを登録するにはボタン(リンク)をブックマークバーにドラッグしますが、その説明は文章や画面キャプチャがほとんどです。慣れていれば説明を見なくとも登録はできていますが、ブックマークレットに馴染みのない方にでも、より直観的で分かりやすい案内する方法はないかと考えてみました。 ブックマークレットの参考サイト Tumblrのブックマークレット Tumblrのブックマークレットは、ボタンにマ... 続きを読む

Twitterでクリックするだけで変化するトリック画像を分解してみた！ / SQUEEZE - Web Design Studio -

2013/09/02 45 users Squeeze エレン Twitter公式 Twitter

Twitterでサムネイル画像をクリックすると変化する不思議なトリック画像がTL(タイムライン)に流れてきました。どのように実現しているのか気になったので分解してみました。 まずは、見てみましょう Twitter公式のWeb(PC/モバイル)、またはアプリでの閲覧推奨です。以下の画像をクリックして、Twitterで表示された後、再度画像をクリックして拡大表示します。 エレンをクリックしてみてくださ... 続きを読む

HTMLとCSSで手帳アイコンを書いてみました。 / SQUEEZE - Web Design Studio -

2013/08/09 22 users アピアランス イラレ Squeeze イラストレーター CSS

話題の「イラストレーターで四角形オブジェクトを1つだけ配置して、すべてアピアランスで作成されたアイコン」をさらにHTMLとCSSで再現された方がいたので、HTMLとCSSだけで手帳アイコンを作ることにトライしてみました。 参考サイト まずは参考にさせていただいた元ネタはこちらです。 ・イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。｜Web Design KOJIK... 続きを読む

曜日・時間別PV見るならGoogle アナリティクス公式アプリのヒートマップが便利 / SQUEEZE - Web Design Studio -

2013/07/30 30 users サマリー Squeeze アナリティクス 曜日 傾向

Google アナリティクスの公式Androidアプリでは、曜日・時間別ページビューがヒートマップで表示され、ざっくりとした傾向を視覚的につかむには便利だったのでご紹介します。 ヒートマップでざっくり曜日・時間別の傾向をチェック 方法はとても簡単です。Google アナリティクスの公式Andoidアプリにチェックしたいアカウントを設定して「サマリー」を表示するだけ。 「今日」「昨日」「先週」「先月... 続きを読む

日本ではこれから?!流行のフラットデザイン国内事例17個+α / SQUEEZE - Web Design Studio -

2013/07/26 51 users Squeeze 流行 日本

Webデザインのトレンドワード「フラットデザイン」。海外事例は多く紹介されていますが、国内事例はあまり見かけなかったのでまとめてみました。 「フラットデザイン」に明確な定義はなく、事例の選別は非常に悩みましたが、要素を含んでいるであろうサイトも含めピックアップしてみましたので参考にしていただければと思います。 フラットデザインとは 簡単に言うと「立体感やテクスチャ、影など現実に似せた装飾を排したシ... 続きを読む

「HTML5で冷気を表現したサイトがすごいな」を分解してみた！ / SQUEEZE - Web Design Studio -

2013/07/19 135 users canvas IDEA*IDEA Squeeze 透過PNG

「HTML5で冷気を表現したサイトがすごいな | IDEA*IDEA」で紹介されていた「メンソール系 氷冷エナジードリンク RAIZIN COOL」のリアルな冷気の表現がHTML5/Canvasで作成されているということで、どんな風に出来ているか気になったので分解してみました。 Canvasに透過pngを描画してループさせる (1)(2)(3)と、それぞれに<canvas>を配置します。そこに透過... 続きを読む