たねっぱ！ » katoppa!

デザインネタはここで探せ！Webデザインに関する情報が集められる参考サイト・参考ブログまとめ

katoppa! — Tue, 02 Apr 2013 07:00:17 +0000

Webデザイン業界はまさに光陰矢のごとし

Webデザインに関する情報は日々刻々と移り変わっていきます。そんな流れの早いデザインに関するネタを探すときに役立つサイトをご紹介します。暇な時に眺めるもよし、ブログネタを探しに行くもよし、最新のデザイン動向を勉強するもよしです。

DesignDevelop

姉妹ブログとして、Design Worksというブログも運営されています。

Designdevelopの姉妹ブログ、毎日のインスピレーションに！をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中

Photoshop VIP

Photoshopのブラシ素材からチュートリアルまで。

CBCNET

アートから商業デザインまで、幅広い話題が特徴。クリエイティブ系の求人情報も扱っています。

Webデザインとグラフィックの総合情報サイト – MdN Design Interactive

言わずと知れたMDN。その昔、「web creators」という雑誌がありましたが、残念ながらWeb版のみになってしまいました。
今でもWebデザイナー向けの書籍をたくさん発行されていますので、お世話になることも多いですね。
こちらのサイトは書籍情報からWeb系トピック、クリエイティブ系求人情報まで、多岐にわたって更新されています。

CINRA.NET-シンラ-　音楽,アート,デザイン,映画,演劇のニュースサイト

映画やアート、音楽といったカルチャー系の記事や、デザインを扱ったニュースサイトです。オシャレなカウンターカルチャー情報はこちらで。

Web担当者Forum – 企業ホームページとネットマーケティングの実践情報サイト – SEO/SEM アクセス解析 CMS ユーザビリティなど

ビジネスの1チャンネルとしてのウェブサイトの企画・構築・運営・技術・マーケティングに関する情報が集まったサイトです。
コンテンツとしては、日々更新される国内・海外のニュース、有名筆者による連載記事、コラム、解説記事や、編集部によるデータライブラリーなどがあります。

SEOやWebマーケティングに関する読み物が充実しているのがこちらです。

Webクリエイターボックス

もはや説明の必要のないくらいな有名サイトですね。デザインTipsや最近のWeb動向、Webデザイナーのライフスタイルに関する記事を更新されています。

コリス

こちらも有名なWeb系Tipsサイト。jQueryライブラリやデザインまとめなど、更新頻度も高くいつもお世話になっています。

LINE Corporation ディレクターブログ

2013年4月1日から、Livedoorディレクターブログと統合になったんですね。慌ててブクマし直しました。Livedoorの頃からWebネタでお世話になっていましたが、これからも継続されるとのこと。

[to-R]JavaScript/jQueryやCSS、iPhone/Androidなどのフロントエンド情報を発信

西畑一馬さんが運営されているサイトです。jQueryの話題が多い気がします。

CREAMU | a design blog that introduces graphic ＆ new technology

東京のWeb制作会社株式会社クリームの川下城誉さんが、Webデザイン、DTPデザイン、プログラミングや日常ネタなどを更新されています。

はてなブックマーク – 人気エントリー

Web系からネタ系、時事ネタ、炎上ネタまで。はてなの人気エントリー（ホットエントリー）をチェックしておけば、最新事情通に。

phpspot開発日誌 – PHP/Ajax/JavaScript/CSS等の最新技術情報をお届け

プログラミング系の記事が多いですが、Webデザインの参考になる記事もたくさんあります。

Webdesign | minimega® designbureau

ミニメガのWebデザインのページ。海外のサイトですが、デザインに言葉は不要！（というか、文章は得にありません。）ブログページもオシャレ小物が紹介されていて可愛いです。

Web Designer Wall – Design Trends and Tutorials

こちらも海外のサイトですが、美麗なサイトデザインを見るだけでもいつも刺激をもらっています。

このサイトの運営者でもあります。こちらではWebデザインやイラストのギャラリーがありますよ。

フラットデザインサイト15個まとめてみた

katoppa! — Mon, 01 Apr 2013 05:30:00 +0000

フラットデザイン、集めてみました

Windows 8のモダンUIに代表される「フラットデザイン」。
「フラットデザイン」とは、余分な装飾は排除し、グリッドを意識した構成になっており、カラフルな単色かグラデーション、タイポグラフィが特徴のデザインです。

Windows 8のモダンUIで採用され、大きな話題となりました。

ブームに乗ってたくさんのWebデザインが生まれましたね。
今回はそんな「フラットデザイン」のサイトをまとめてみました。

Google I/O 2013

Googleで毎年行われるデベロッパー向けイベント、「Google I/O」。今年のサイトデザインは下層ページも含め、フラットな感じでした。最近のGoogleは全体的にフラットなデザインですよね。（新しくリリースされたGoogle Keepとか。)

Lorenzo Verzini

イタリア人デザイナー、Lorenzo Verzini氏のポートフォリオサイトです。フラットデザインのサイトでは必ず紹介されていました。

Fitbit

ワイヤレス活動量計「Fitbit」のサイトです。カラーリングが可愛いです。

Future Insights Live 2013

タイルがくるりと一回転するときのアニメーションが面白いです。

Lowdi – Bluetooth speaker

Bluetoothスピーカのサイトです。これは可愛い。

Rock Werchter 2013

Simple version control for designers – LayerVault

パララックスでフラットでサークルをモチーフにしたサイト。「これでもか！」というくらい流行のデザイン要素を盛り込んだWebサイトです。あと、ソースを表示して「ニヤッ」っとしました。

カロリーメイト公式サイト | 大塚製薬

こちらもページによってパララックスになっています。インフォグラフィックスを用いてカロリーメイトについて解説した「コラム」ページもいいですね。

Bärnt & Ärnst

マウスーバー時の動きが心地良いです。

Coffitivity – Increase Your Creativity!

※音が出るかもです。ご注意ください。
カフェの雑音を再生するサイト。家でなくカフェくらいのうるささだと仕事が捗る人向けのWebサービスです。（家で試したら「うるさい」と言われました…。）
自分の好きな音楽と合わせて再生するもよし、カフェの雑音だけで作業するもよし。デザインとしてはフラットかつ、レトロモダン、といった雰囲気で可愛いですね。エウレカって、あのエウレカでしょうか。

We make apps | Etch

アプリ制作会社のサイト。「ザ・モダン！」といった感じのデザインです。全ての要素が正方形にカットされていて清々しいです。

feedly. feed your mind.

「Google Reader終了のお知らせ」騒動の時に見かけたサイトです。こちらの記事によれば、Google Reader終了後もインポート／エクスポートなしにそのまま付けるのだとか。使って見ようと思いつつ未だにGoogle Readerから脱出できていませんが、いずれこのfeedlyを使って見たいと思っています。

MetroTwit – the Windows Twitter client you’ll love to use

Windows用Twitterクライアント「MetroTwit」のサイトです。

The Smartphone Reinvented Around You | Windows Phone (United States)

Windows Phoneの米国版サイトです。

Friends of The Web, LLC

Webサイト＆モバイルアプリ制作会社のサイト。4人で構成されている会社という事もあってか、ミニマムなデザインです。にもかかわらず、ページ遷移時のダイナミックな動きには意表を突かれます。ロゴのアニメーションも可愛いです。

フラットデザインを実装してみたい人は

Metro UI CSS

Metro UIデザインを早速Webに取り込みたいという方向けに、無料のCSSが配布されていました。

Styled with Metro UI CSS

といった感じで、Metro UI CSSへのリンクを貼れば、自由に使えるそうです。
手っ取り早く導入してみたい人にはいいかもしれません。

【Photoshop】カンタン♪テキスト装飾の作り方　後編　～3.赤鉛筆で線を引く、4.蛍光ペンで線を引く編

katoppa! — Fri, 29 Mar 2013 07:00:45 +0000

実生活でよく使うテキスト装飾を、Web上でやってみよう

どうも。katoppa!です。
テキスト装飾をPhotoshopで作ってみよう、後編です。

例えば、こんな感じの仕上がりを想定しています。

赤枠で囲む
マスキングテープを作る
赤鉛筆で線を引く
蛍光ペンで線を引く

今回は後編。「赤鉛筆で線を引く」、「蛍光ペンで線を引く」をお送りします。

それでは、いってみましょう！

CASE03：「赤鉛筆で線を引きたい！」

「ペンツール」に持ち替え、線を引きたい箇所の始点と終点をぽちぽちとクリック。この時、真っ直ぐな線ではなく、多少斜めなくらいが良いです。手書きの無造作感が出ます。

続いて、ブラシを設定していきます。
Photoshopの「ブラシツール」には様々なブラシが用意されています。そのものずばり「鉛筆」というプリセットブラシもありますが、うまく鉛筆感が出なかったので今回は自作します。

まずは「ブラシツール」に持ち替えましょう。

そしてペン立てに刺さったブラシのアイコンをクリック。
まず「ブラシ先端のシェイプ」を決めます。今回は4pxで作っていますが、後からも変更可能です。
小さな画像だと4pxくらいで大丈夫ですが、太さを変えてみるのも面白いです。
もう少し太くすればクーピーで書いたように見えたり、更に太くすればクレヨンで書いたようにも見えますよ。
同じように作ってみたい方は、下図の通り設定してみてください。

次は「シェイプ」。

次は「テクスチャ」です。テクスチャは「横に積む」というテクスチャを選びました。これも他のテクスチャを試してみても面白そうです。

「その他」の設定。ブラシの設定は以上です。

では、最初に作ったパスを使っていきましょう。
まずは新規レイヤーを作成します。Ctrl + Shift + Nで「新規レイヤー」を作り、Enterを押します。
そのレイヤーが選択されていることを確認して、「パス」をクリック。
先ほど作ったパスが表示されていると思います。（画像では「パス」になっていますが、通常は「作業用パス」という名前です。どちらでも大丈夫です。）
ここで、「パス」を右クリックし、「パスの境界線を描く」を選択します。
※選択できない場合：レイヤーが選択されているか確認してください。

すると、「パスの境界線を描く」というウィンドウが出てきますので、「強さのシミュレート」にはチェックせずに「OK」を押しましょう。
「強さのシミュレート」にチェックすると、筆の入りと出のところで先細りする効果が得られます。今回適用すると薄く細くなって見えにくくなってしまうので、もう少し太い線の時に適用すると良いかもしれません。

そして出来上がりがこちらです。

もし赤色でない色で描画されてしまったとしてもご安心ください。「レイヤースタイル」で「カラーオーバーレイ」すれば後からでも色を変更出来ます。
赤鉛筆っぽい色ということで、今回は「#a5000c」を選びました。ちょっと暗い赤色にすると、赤鉛筆っぽいですね。

色や太さを変えてみました。青えんぴつと、黄色クレヨン。
パスをランダムな曲線にすると、手書き感がより強まります。

ブラシを使って落書き。こんなラフなイラストもぱぱっと書けます。
（何が書いてあるかわからないって？「たねっぱ！」のロゴです。）

今回作ったブラシをまた使いたい場合は、「新規ブラシを作成」しておけば自分仕様のブラシを登録出来ますよ。その際、自分がわかりやすいような名前を付けてくださいね。「鉛筆 – 6px」とか。

ぜひお試しください。

CASE04：「蛍光ペンで線を引きたい！」

まずブラシツールを持ちましょう。
今度は、ウィンドウ左上あたりにある、ブラシを選択するメニューから「フラット（20pixel)」を選択します。もう既に形が蛍光ペンに似ていますねｗ

新規レイヤーを作成します。Ctrl + Shift + Nで「新規レイヤー」を作り、Enterを押します。
そのレイヤーを選択していることを確認し、蛍光ペンをひきたい箇所に線を引きましょう。色はひとまず何色でも構いません。ここで引いた線がそのまま蛍光ペンになりますので、丁寧にひきましょう。もし満足いく線にならなければ、Ctrl + Aで全体を選択してDeleteすれば消えますので、再度、線を引きましょう。
今のところこんな感じです。

次に、レイヤースタイルで色を蛍光色っぽくしましょう。今回は蛍光ピンクっぽくしたいので、「#ffb6dc」にしました。淡いピンクならなんでもそれっぽく見えます。ついでに、文字のレイヤーより下に移動しましょう。

既にだいぶ蛍光ピンクに見えると思いますが、もう少しだけ工夫してみます。
レイヤーの不透明度を「77%」くらいにします。更に、レイヤーをコピーして適当にずらしてください。

するとこんな感じです。完成！
不透明度を下げて重ねたことで、二度書きした感じが出ました。

いろいろ使い道がある…かも？

以上、前後編でお届けしてきましたがいかがだったでしょうか。

Photoshop人生を振り返ってみれば、テキストの装飾って意外と使う機会が多い気がします。
もし良かったらチャレンジしてみてくださいね。

【Photoshop】カンタン♪テキスト装飾の作り方　前編　～1.赤枠で囲む、2.マスキングテープ編

katoppa! — Wed, 27 Mar 2013 03:00:42 +0000

実生活でよく使うテキスト装飾を、Web上でやってみよう

どうも。katoppa!です。
デザインを作る時に、文章を装飾する機会があると思います。今回は、テキスト装飾をPhotoshopで作ってみたいと思います。

例えば、こんな感じの仕上がりを想定しています。

赤枠で囲む
マスキングテープを作る
赤鉛筆で線を引く
蛍光ペンで線を引く

の、4種類を作ってみます。キャプチャ画像の量も多いので、前後編に分けて2つずつご紹介します。
今回は「赤枠で囲む」、「マスキングテープを作る」をお送りします。

それでは、いってみましょう！

まずは下準備から

既に装飾したいテキストをPhotoshopデータで用意されている人は次の項目から進んでください。ゼロから始める方はこちらから。
といっても適当にサンプルテキストを入力するだけですｗ

見本のテキストは日本語でも構いません。今回は“Lorem ipsum”というサンプル文章を使いました。

コピペしたい人はどうぞ↓。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

これで下準備は完了です。それでは、以下はそれぞれのケースに沿って解説していきますので、希望の装飾がある場合はそこだけ読んでください。

CASE01：「赤枠で囲みたい！」

まず長方形ツールを選びます。

次に、赤枠で囲みたい箇所に長方形を描画します。サイズの微調整は後からでも可能なので、ざっくり描きましょう。描画色は今回関係無いので、なんでもいいです。

「ウィンドウ」→「レイヤー」からレイヤーパネルを開き、先ほど描いたレイヤーの空白の箇所をダブルクリック。

すると、レイヤースタイルが編集できますので、左のリストから「境界線」を選択し、オプションを図のように設定してください。
線を「内側」にしているのは、角がきっちり描けるからです。サイズも1pxにしていますが、こちらも後から調整可能。
色はお好きな赤をお選びください。

ここまでくると、茶色い長方形に赤枠がついたものが作成されています。これでは文字が読めないのでｗ、「塗り」を0%にしましょう。

「塗り」は、レイヤースタイルに影響しない、オブジェクト自身の塗りですので、0%に設定すれば下図のように透明な赤枠ができます。

コレで完成！
この方法であれば、後から枠のサイズや線幅を変更するのも楽です。また、応用すれば、丸や星形の赤枠も作れますね。

CASE02：「マスキングテープを作りたい！」

Ctrl + Shift + Nで「新規レイヤー」を追加します。次に、「長方形選択ツール」をクリック。

マスキングテープの元になる長方形（選択範囲）を描きます。
高さはマスキングテープの高さ、横幅は覆いたい文字より少し大きめに取ると良いでしょう。（後で端を処理するため）

マスキングテープの色を選びます。これは、選択範囲を作成するより前に選んでおいても構いません。今回はブルーグリーン、#007f84にしました。

先ほど作った「新規レイヤー」が選択されていることを確認してから、描画色で塗りつぶします。（Alt + BackSpace）その後、Ctrl + Dで「選択範囲を解除」してください。
すると、こんな感じです。

次に、マスキングテープの端のギザギザ感を処理していきましょう。マスキングテープは、手で千切ることが多いので、切り口がギザギザになっていると思います。

そこで、ざっくり選択できる「なげなわツール」を使いましょう。デフォルトでは「多角形選択ツール」が表示されていると思いますので、長押しして「なげなわツール」を選択してください。

まずは以下のとおり、左右がギザギザになるように選択範囲を作ります。よく画面を拡大し、ギザギザになるように選択してください。やりすぎたかなくらいでも、豪快にちぎった感じが出るので大丈夫だと思います。

青緑で塗りつぶしたレイヤーが選択されていることを確認して、Deleteキーを押しましょう。選択範囲内が削除されます。するとこんな感じ。形はもうマスキングテープに見えますね。ここまで来るとあと少しです。

今度は、先ほどのレイヤーを「乗算」にします。すると、下の文字が読めるように。このままでもマットなテープを貼ったように見えますね。

しかし、マスキングテープの「紙」っぽいマットな感じ感じられませんね。
そこで、「レイヤースタイル」で「パターンオーバーレイ」効果を付加しましょう。
適用するパターンは「灰色のみかげ石」を選択しました。（表示されていない場合は歯車マークから「グレースケールペーパー」を追加しましょう）

「描画モード」は「ソフトライト」を選んでいるので少し明るい色合いに変わりますが、「乗算」を選べば落ち着いた感じになりますし、他のパターンを適用してもまた感じが変わります。
好みの質感になるまで色々試してみるのも良いと思います。

「パターンオーバーレイ」をしたら、無造作感を出すために少し斜めにしてみましょう。
マスキングテープのレイヤーを選択していることを確認して、Ctrl + T　→　バウンディングボックスの角を掴んで程よい傾きに回転してください。
するとこんな感じで、完成です。

レイヤーを複製してアレンジすれば、異なる色合いのマスキングテープが作れます。重ねると透け感が分かるので、よりいっそうマスキングテープっぽくなります。

それでは、次回は

「赤鉛筆で線を引きたい！」
「蛍光ペンで線を引きたい！」

をお届けする予定です。

「LINEで送る」ボタンを実装する方法

katoppa! — Wed, 13 Mar 2013 07:30:09 +0000

ユーザ数が1億人を突破したLINE！

どうも。katoppa!です。

LINEのユーザ数が1億人を突破したというニュースは耳に新しい話題ですね。
「LINE」登録ユーザー数が世界1億人を突破、各種記念キャンペーンを開始 – インターネットコム

（※NHN Japan Corporation | 「LINE」、世界1億ユーザーを突破より引用）

若年層への浸透率も高いLINEは、Web業界でも今や看過できない重要なソーシャルツールになっています。そんなLINEへURLやテキストを送ることができる「LINEで送る」ボタンが、公式にリリースされていますよ。

今回はそのボタンの実装方法をご紹介します。

「LINEで送る」、実装してみまSHOW！

まずは公式サイトのページへアクセス！
設置方法｜LINEで送るボタン

次に、幾つか生成するスクリプトの設定をしましょう。
まずボタンのタイプを選択します。

更に「送るテキスト」を設定。特定の文字列をLINEで送る場合は「直接入力」を、サイトのタイトルとURLをLINEで送る場合は「ページタイトルとURLを使う」を選択してください。（よくわかんないという人は、とりあえず「ページタイトルとURLを使う」を選んでやってみましょう！）

最後に、プレビューを確認して、問題なければソースコードをコピーしましょう。

あとは、HTMLファイルの「LINEで送る」を実装したい箇所に先ほどのソースコードをペーストするだけ。

ここでちょっと注意！

facebookのいいね！ボタンや、twitterのツイートボタンとは少し異なる点がありますので、お気をつけください。
実は、「LINEで送る」というボタンは、現在スマートフォンのみで利用できるボタンです。PCサイトで実装しても、LINEで送ることができず、LINE公式サイトが表示されます。

PCサイトで表示してもユーザの混乱を招く結果になるかもしれませんので、「スマホで見た場合のみ表示する」など、工夫する必要がありそうです。

その他にも、文字列やURLは、エンコードをUTF-8にしておく必要があります。そうでない場合、文字化けしてしまうとのこと。

以上です！
正しく使って楽しくユーザビリティを高めましょうー。

HTMLからCSSセレクタを自動で書きだしてくれる「CSS Selector Generator」でスピードコーディング！

katoppa! — Thu, 21 Feb 2013 07:00:55 +0000

CSSセレクタを書き出す作業、自動化してぇ…

どうも。katoppa!です。
コーディングって、ルーティンワークが多いのに意外と自動化されていませんよね。

例えばzen-codingを使えば、タイプするHTMLコードをかなり簡略化出来るけど、それでも完全なる自動化というわけではありません。いえ、zen-codingはかなり効率化の功労者だと思っています。Web業界の功労賞をあげたいくらいです。それでも、もっとコーディングを楽にしたいと思ってしまう業の深いワタクシであります。

停滞気味の自動化世界に、ハードパンチをくらわすWebサービスが現れた！

その名も、「CSS Selector Generator」。名前の通り、CSSセレクタを生成してくれるWebサービスです。バシャログ。さんが作っています。
CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成！

見た目はかなり~~キツい~~可愛らしいキャラクターが描かれていますが、その実力には本当に頭が上がりません。ちなみに、「ジェレ姉さん」というキャラの名前が何度挑戦しても言えないと話題に！（私の中で）たぶん「ジェネレート」という単語の印象が強すぎて、「ジェネ姉さん」と言ってしまいそうになるからだと自己分析していますがそんなことはどうでもいいですね。

試しにHTMLソースコードをジェネレートしてみた

まず、書いたHTMLコードをコピーアンドペースト。この時、全てのHTMLを入れると長くなりますので、大きなdivごとに分割すると良いかもしれません。（その場合、WrapperやContentsなど、要素を囲っている大枠は自分で追記してください。）

次に、CSSセレクタを生成するにあたって細かい設定を決めていきます。

該当するエンコードを選んでください
最初から入れておきたいセレクタがあれば入力します。デフォルトではaタグ関連一式が入っていますね。私はcommon.cssなどにaタグのcssを記載しますので、全て消しています。
セレクタのルールにチェックします。「ul.itemList」など、HTML要素を入れず「.itemList」としたい場合、「id、class セレクタからHTMLの要素タイプ名を省略」にチェックします。重複を防ぐためには「id セレクタを複数記述しない」にチェック。私は最初のチェック項目のみにチェックしています。
除外する要素（cssが必要ないHTML要素）を記載します。特に気にしないならデフォルトの記載のままで良いと思います。
「CSSを出力」ボタンをクリック！

一体、どうなるのか！？
ざわ…ざわ…
ババーン！

コメントも含め、一瞬で生成されました。待ち時間ゼロ。

これを使えばCSSセレクタの書き出し時間が10分→1分くらいに短縮できるのではないでしょうか。画期的です。ぜひ皆様も一度使ってみてください。

CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成！

あなたも「ジェレ姉さん」と言ってみよう！（「じぇねれーさん」になること請け合いです。）
ではまた！

もういい加減飽きてるかもしれないけどパララックスサイト集めてみた

katoppa! — Mon, 18 Feb 2013 07:00:00 +0000

もうみんな飽きた？まだ大丈夫？

どうも。katoppa!です。

パララックスサイト、流行っていますねー。ん？ご存知ないですか？ご存知ない方のために調べましたよ、パララックス！

パララックスサイトとは

パララックス【parallax】
視差(しさ)。
-パララックス【parallax】の意味 – 国語辞書 – goo辞書より引用

視差らしいですよ視差。
…で、視差ってつまりどういうことなんだぜ？

し‐さ【視差】
１目と対象物との相対的位置の移動または差違による、網膜上の結像の位置の変化。対象物に対して、両眼の視線の挟む角度で表される、両眼視差によって対象物の遠近を知覚する。
-しさ【視差】の意味 – 国語辞書 – goo辞書より引用

平たく言うと、スクロールなどの移動により、遠近を感じるサイトってことですかね。なるほど、よくわかりました。いや、最初からわかってましたけどね。漠然としかわかってなかった、なんてことは、まるでないです。

パララックスサイト、紹介します

では、早速ご紹介しましょう。私が思わず唸ったサイトたちです！どうぞ！（いや、私は虫けらのような人間です、調子にのってすみません）なるべく他で紹介されてなさそうなのを選んだつもりですが、もしとっくにご存知だったらすみません。謝ってばかりですみません。

高まる抗菌力のヒミツ｜HYGIA(ハイジア)｜ライオン株式会社

世界のNintendoから、オーストラリアのマリオカート公式サイト

横スクロールのサイトです。キャラクターが立体的に見える、不思議！
Mario Kart Wii Experience

これ、日本人が作ったらしいっすよ

かっけぇえええ！
superChemical｜versionD

まとめ

いかがでしたか？とってもパララックスでしたね！
まだまだこれからもパララックスサイトは増えていきそうです。
だいぶ目が肥えてきたところで、そろそろ作る側に回ってみるのもいいかもしれませんね！
作ったら教えてください。ではまた！

サイト上でメールアドレスにリンクしたい！そんな時のスパムメール対策はこれ。

katoppa! — Thu, 14 Feb 2013 01:56:48 +0000

これまで、こんな方法でスパムメール対策してました。（てへぺろ）

メールアドレスをWebサイトで公開するとき、スパムメール対策をしますよね。簡単な方法では、メールアドレスを画像で記載する方法なども有効ですが、この場合テキストではないのでコピーができません。ユーザに不便をかけてしまうことになりますね。

また、もう一つの方法として、メールアドレスとしての体裁を崩してしまう、という手段があります。
例えば、こんな感じ。

hoge(at)hoge.com
※(at)を@に変えてください。

これだと、ユーザは、(at)の前までをコピー・アンド・ペースト、(at)の後ろをコピー・アンド・ペーストする必要がありました。ただメールしたいだけのユーザに、負担を強いることになります。

それでもエンティティ化なら…エンティティ化ならなんとかしてくれる！※

SLAM DUNK THE MOVIE [DVD]

posted with amazlet at 13.02.08

東映 (2004-12-10)
売り上げランキング: 32,843

Amazon.co.jpで詳細を見る

※元ネタ：スラムダンク

HTMLエンティティ化とは

「HTMLエンティティ化」とは、文字を数字や記号に置き換えることです。例えば「a」は

という具合です。文字や数字に置き換えることで、メールアドレスをクロールしているボットに見つからないようにしよう、ということです。（万全のセキュリティではないかもしれませんが、何もしないよりだいぶマシだと思います。）

エンティティ化しても、Webサイト上では通常通り「hoge@hoge.com」と表示されていますし、aタグを付ければ、クリック一つでメール可能。ユーザビリティも向上します。

エンティティ化の小ワザ！

エンティティ化するときは、mailto:も含めてエンティティ化しておくとベターです。なぜなら、mailto:が残っていると、「それ以降がメールアドレスである」ことがバレてしまうからです。

ソースコードはこんな感じです。1行目が通常の書き方で、5行目がエンティティ化した書き方です。



<a href="mailto:taneppa@taneppa.net">taneppa@taneppa.net</a>
　　　　　　　　　　　　　　　　　　　↓
<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#116;&#97;&#110;&#101;&#112;&#112;&#97;&#64;&#116;&#97;&#110;&#101;&#112;&#112;&#97;&#46;&#110;&#101;&#116;">&#116;&#97;&#110;&#101;&#112;&#112;&#97;&#64;&#116;&#97;&#110;&#101;&#112;&#112;&#97;&#46;&#110;&#101;&#116;</a>

こんな感じで、暗号みたいな文字列になります。ソースコードはすっごく長くなってしまいますが、安全のために背に腹は代えられないといったところでしょうか。

図で描くとこんな感じです。