たった1行!スマホサイトのコーディング時に役立つ小技8(サンプルあり)

たった1行!スマホサイトのコーディング時に役立つ小技8(サンプルあり)

お久しぶりです!スマホサイトを制作していて、たった一行でとても便利なコードなのに、「あれ、なんだっけ…」と、ど忘れすることがいくつかあったので、今回は忘れないためにメモしておこうと思います!

今回はサンプルも作ってみました!

続きを読む
無限スクロールで探しやすいWebデザインギャラリーサイト10

無限スクロールで探しやすいWebデザインギャラリーサイト10

最近、経験の少ないデザインに挑戦する機会がありました。そのため、参考になるWebデザインを探すためにギャラリーサイトを見まくっていたのですが、その時「ギャラリーサイトに無限スクロールの組み合わせって最強だな」と思ったんですよね。個人的に探すのがすごく楽だったんです。

ということで、今回は無限スクロール機能がついているギャラリーサイトをまとめておきます。Webデザインを探す際にどうぞ!

続きを読む
PNG画像の軽量化に活躍!Photoshop拡張機能「PNG Hat」をレビュー

PNG画像の軽量化に活躍!Photoshop拡張機能「PNG Hat」をレビュー

先日、コリスさんがPhotoshopでPNG画像をより美しく軽量化する機能拡張「PNG Hat」をプレゼント!というありがたいキャンペーンを開催してくれました。

お仕事でPNGの軽量化にはいつも悩まされていたので、私もあわよくば…!と淡い期待を込めて応募したところ、なんと当選することができました!

今回は、Photoshopの拡張機能「PNG Hat」の使用感などをレビューしてみたいと思います!

続きを読む
自分のデザインをチェック!色覚シミュレーションの方法いろいろ

自分のデザインをチェック!色覚シミュレーションの方法いろいろ

ずいぶん遅いですが、あけましておめでとうございます!

ところで、先日ガンホー・オンライン・エンターテイメントの「パズル&ドラゴンズ(通称パズドラ)」が色覚特性に対するサポートを開始しましたね。すべての色覚タイプに対応しているわけではないようですが、パズドラ大好きの私としては素晴らしいアップデートだと思います。

私たちが普段目にしている「色」は、実は誰にとっても同じように見えているわけではありません。昨年、「カラーハンティング展」という色をテーマにした展示会に行った際に、色覚シミュレータというものを触る機会があり、色覚の特性によってこんなにも色の見え方が違うのかと印象に残ったのを覚えています。

そして普段、自分の見えている世界だけで制作しているデザインは、本当に誰にとっても見やすいデザインなのだろうか?と思いました。

今回は、色覚シミュレーションの方法や色のコントラストをチェックできるツールなどを自分なりに調べてみましたので、まとめてみます。

続きを読む
Googleマップをスマートフォンでも最適な大きさで表示しよう!

Googleマップをスマートフォンでも最適な大きさで表示しよう!

最近、お仕事でGoogleマップのiframeをスマートフォンで最適な大きさで表示させるにあたり、色々と悩みました。

そんな時発見した「lifehacker」さんの記事で、紹介されていたレスポンシブに対応させる方法が一番よさそうでしたので、備忘録として書き残しておきます。

続きを読む
Ajaxで遷移するページのPVをGoogleアナリティクスでカウントしてみよう

Ajaxで遷移するページのPVをGoogleアナリティクスでカウントしてみよう

先日、jQuery.autopagerで次のページを読み込む間にローディングアイコンを表示させようという記事を書きましたが、このようにAjaxでページを遷移させる設計にしてしまうと、次のページが読み込まれてもそのページ遷移はPVとしてカウントされません。

ページ遷移が早くなるのは嬉しいのですが、やっぱりPVとしてカウントされないのは寂しいです。ちょっとソンしている気になっちゃいますよね。

なので、今回はAjaxで遷移するページのPVをカウントする方法をご紹介します!

続きを読む
jQuery.autopagerで次ページを読み込む間にローディングアイコンを表示させよう

jQuery.autopagerで次ページを読み込む間にローディングアイコンを表示させよう

このテーマをスマホ対応させた際、「jQuery.autopager」というプラグインを使ってオートページャーを実装してみました。

画面遷移を少なくしてくれるので重宝していますが、次のページが読み込まれる間に何も表示されないと「あれ?」と不安になってしまいますよね。

というわけで、次のページが読み込まれる間に表示される「ローディングアイコン」を実装してみましたので、今回はその導入方法などをご紹介します!

続きを読む
WordPressでスマートフォン用テーマを作成した時の5ステップ

WordPressでスマートフォン用テーマを作成した時の5ステップ

先日WordPressでスマートフォン用テーマを作成した際に、どのような流れで作成したのかをざっくりまとめてみました。

「手描きスケッチ」「DropBoxで作業する」など、WordPress以外でスマートフォンサイトを作るときも大体同じ流れで行うので、これを機に書き留めておこうと思います。

続きを読む
色彩いっぱいの展示会「カラーハンティング展 色からはじめるデザイン」レポート!

色彩いっぱいの展示会「カラーハンティング展 色からはじめるデザイン」レポート!

8月も半ばですが暑い日が続きますね!そんな中、私は涼しい色を求めて現在開催中の「カラーハンティング展 色からはじめるデザイン」に行ってきました!

今回も撮影OKのありがたいデザイン展だったので、会場の様子や興味深い展示内容などをレポートします!

続きを読む
トップに戻る