なるべく減らしたい「404 Page Not Found」。しかし、リンク切れや意図しないアクセスなど、404エラーが発生してしまうのは避けられません。 そんな時にも笑いや同情を誘いユーザーを虜にする「404 Page Not Found」を30個、選りすぐってお届けします。ピンチをチャンスに変えて、ファンを増やしましょう！ニュースメディア １.ハフィントン・ポスト いまにも泣きそうな404。 ランダムで別バージョンもあります。 企業 ２.LIG 「そんなページねえよｗ」と強烈なLIGの404。このあたりがイラッとしないラインかも……！ ４.サクラクレパス ワザあり！ 商品（消しゴム）のアピールにも役立つ404。 ３.KAYAC デザイナーズブログ カヤック意匠部のマスコットキャラクターがお出迎え。 ５.タカラトミー 黒ヒゲ危機一髪！ ６.ミスタードーナツ こちらはポンデライ

画像加工や写真の修正、すべて手作業でやってませんか？ Photoshopのアクション機能で自動化すればアッという間に終わります。今回はデザイナーの仕事を驚くほどラクにするアクションを18種、厳選してまとめました。 目次 単純作業をラクにするアクション（×4種） モックアップ作成をラクにするアクション（×6種） 写真加工をラクにするアクション（×6種） 写真の枠をラクに付けるアクション（×2種） 単純作業をラクにするアクション １.Retina対応画像を生成する Retinize Itを使えば、iPhoneやiPadに対応したRetina画像を自動生成できます。リサイズ〜名前変更の手間を一気に短縮しましょう。 Retinize It ２.リフレクションする 水面に反射したような効果が得られるリフレクションエフェクトが簡単に作れるアクションです。たったのワンクリックでAppleプロダクトの

回線が細くCPUも弱いスマートフォンは、リッチなWebサイト表示が苦手です。しかし、地道な対策で表示速度が驚くほど変化するのも事実。 今回はスマホのWebサイト表示の高速化手法をまとめました。もちろんPC向けにも効果バツグンのTips集です。 Webサイトを劇的に高速化する9つのポイント １.画像を圧縮する ２.画像はサイズを指定して使う ３.画像は適切なサイズで使う ４.CSS/JavaScriptを圧縮する ５.CSSスプライトを使う ６.不要なCSS/JavaScriptを読み込まない ７.CSS/JavaScriptをまとめる ８.CSSセレクターを最適化する ９.mod_deflateでgzip圧縮する １.画像を圧縮する 画像を最適化することは、フロントエンドの高速化に絶大な効果を発揮します。Photoshopを使って圧縮しても良いのですが、もっと手軽に圧縮

現在、欧文を中心に600以上の書体が選べるGoogleWebフォント。これだけ数が多いと、どれを選べばいいのか日本人の私たちにはよく分かりません。 今回は、全世界で最も使われている人気のGoogleWebフォントを10個厳選してお届けします。海外向けのサイトを作る際にはハズせない、日本向けサイトを作る際にもアクセントとして使いたい、とっておきのGoogleWebフォントを集めました。 GoogleWebフォントを使うメリット GoogleWebフォントを使うと、こんなにもたくさんのメリットがあります。 SEO対策になる 修正が簡単に行える 選択してコピペできる 拡大縮小・高解像度画面（Retina Displayなど）でもボケない 使わない手はありません。 GoogleWebフォントの使い方 使い方に関しては、OZPAさんのブログが詳しいです。参考にしましょう。 今さらながらWe

競合に負けないWebサービスをつくるため、UI（User Interface）、UX（UserExperience、ユーザー体験）にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです！ 目次 基礎知識 １．UXのためのUIデザイン ２．UX is not UI ３．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：前編 応用編（Webサイト） ４．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 ５．コンテンツで改善する UI デザインの極意 応用編（スマホアプリ） ６．UI＆UX / 重要なのは、毎日さわって嬉しいUI UX! 応用編（タブレットアプリ） ７．ニコニコ超デザイン-

デザイナーにとって時間は命。〆切が差し迫る中、沸騰した頭での素材集めは大変です。そこで今回は面倒な会員登録が不要で、無料で使えるベクター素材のサイトだけを厳選して10個、選んでまとめました。 各Webサイトの利用規約も一緒にまとめました。頭が煮詰まっていて利用 [...]

スタートアップにとってランディングページのデザインは生命線。サービスとユーザーをつなぐ最初の接点です。今回はランディングページの美しい海外のスタートアップをまとめました。Webサイトとしてデザインが優れているものはもちろんのこと、サービス、アプリを実際に使って [...]

こちらの記事でも書いたように、このメディアの立ち上げにあたり、スタートアップに挑戦されている方やVCの方々にお話を伺いました。そこで聞いた最も共通する課題の一つが『プロモーション方法』でした。 良いサービスはあるのに広め方が分からない。 そこで、今回はプロモーション方法の一つとして、「プレスリリースのやり方」についてご紹介します。 ここに書いたようなちょっとした工夫をするだけで、かなり反響に違いが出ます。(私も前職でPR業務もやっていたのでその違いを実感しています) 資金が限られているスタートアップにこそ、プレスは必須施策だと思いますので、ぜひ実践してみて下さい！ ■目次 １．アイディアの考え方編 ２．書き方編 ３．送り方編 １．アイディアの考え方編 プレス企画の切り口チートシート PRTIMESさんのこちらのページでは、プレスリリース発信のタイミングとして下記を挙げてく

まだまだメンバーの数が少なく、職種ごとの距離が近いスタートアップ。デザイナーの仕事をディレクターやエンジニアが理解することが、プロジェクトを円滑に進める秘訣です。 デザイナーではない方々にとって、デザイナーが普段何を悩み、どのようにWebデザインしているのか知るのは、非常に重要と言えるでしょう。今回は厳選した7つのスライドをご紹介しながら、「配色」「レイアウト」といったデザインのエッセンスを学びます。 もちろん、本職のデザイナーの方にも役立つスライド7連発です！ １．色彩センスのいらない配色講座 7000いいね! されたスライド 「時間がない！ 今すぐ作り始めないと納期に間に合わない！ でもどんな色を使ったらいいか分からない！」そんな人におすすめなのがコレ。Facebookで7000以上のいいね!がついた、@marippe_さんのモンスタースライドです。 配色や明度・彩度の基礎をお