Frontend rescue: how to keep up to date on frontend technologies | frontendrescue.org
This it gets much easier to stay updated through regular consumption provided by trusted sources. Some of the ways to do this are reading blogs, following industry experts through social media platforms, and newsletter subscriptions. In such a way, the more experienced developers share their view on what is happening with new emerging tools and thus help others to filter the information. These pla
CSS Transitionsを使った3Dロールオーバーのアイデア (1/2)
イギリスのフリーランス、アートディレクター／デザイナーであるアンソニー・グッドウィン氏のポートフォリオサイト。※2014年5月にサイトリニューアルされたため、Internet Archiveを参照。 3Dの動きがおもしろいマウスオーバー 3Dパーツを多用し、ダイナミックにコンテンツを見せる「DESIGN EMBRANCED」。いろいろな場所をついついマウスオーバーしてみたくなるWebサイトだ。CSS Transitionsを採用することで、各パーツのアニメーションはとても滑らかに、ストレスなく動く。制作者の実装へのこだわりが見える。 3Dパーツは、マウスオーバーやページ遷移、ローディングアイコンに使われており、ユーザーに強いインパクトを与え、一貫した世界観を演出している。
ついつい押したくなる、CSS3を使ったラジオボタンのデザイン
フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。 ではサンプル１からコードを紹介していきます。 サンプル１ 二択のラジオボックスです。「はい」を押したときと、「いいえ」を押したときの色を変えています。 HTML では、HTMLから。 <div class="sample"> <input type="radio" name="s2" id="on" value="1" checked=""> <label for="on" class="switch-on">はい</label> <input type="radio" name="s2" id="off" value="0"> <label for="off" class="switch-off">いいえ</label> </div> 特に問題
Caesium - Image Compressor
Caesium is one of the most popular image optimization software available helping photographers, bloggers, webmasters, businesses or casual users at storing, sending and sharing digital pictures. Image Compressor Providing a simple yet effective interface with a real-time preview and multiple image processing at the same time, everyone will be able to reach the best result. Advanced users will find
壊れたデザインプロセス（「The Broken Design Process」日本語訳）
2012年8月12日 著 以下の文章は、Philip Zastrow氏の書かれた「The Broken Design Process」を翻訳したものです。レスポンシブWebデザイン関連の記事をこの数ヶ月、いろいろ斜め読みしてきましたが、これは是非とも翻訳しておきたいと思ってZastrow氏にコンタクト、翻訳と掲載につき了解を得ました。ただし、この翻訳には誤りが含まれている可能性があります。英語が読めるなら、原文のほうを是非お読みください。 Webデザインのプロセスは壊れており、レスポンシブWebデザイン（訳者注：以後「RWD」と表記）の推進によって、モダンなアプローチを余儀なくされつつある。 典型的なデザインプロセスでは、理想化されたWebサイトのコンセプトイメージが写真編集アプリを用いて制作される。そして、コンセプトイメージを顧客または承認する立場にある権威に渡し、フィードバックや批判を
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
はじめは今までと同じように、カンプを作ってからコーディング、というやり方でした。 しかし、そのやり方だとトラブルが多いんです、なぜか。 ブレイクポイントとかで揉めたりすることが多いです。 早い話が、いままでの制作のやり方は、レスポンシブWebデザインでは無理だということです。 allWebクリエイター塾の菊池 聡さんは、「レスポンシブWebデザインでは、いままでの仕事のやり方は通用しない。いずれはブラウザでデザインする時代がくる」と、某セミナーで言っていました。 実際、最近は、ブラウザでデザインする、いわゆる「インブラウザ・デザイン」で制作することが多くなってきています。最近は、ほぼ7割くらいです。 最近、久しぶりにFireworksでカンプを作りましたが、「以外とPhotoshopやFireworksでカンプを作るのが面倒だな」と感じました（ちょっといらついていたような気がするのは気のせ
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
レスポンシブWebデザインの案件を初めて担当すると「戸惑う」とか「難しい」という人が多いようです。 1年間、レスポンシブWEBデザインのウェブサイト案件を制作して、レスポンシブWebデザインはなぜ「戸惑う」・「難しい」と思う人が多いのか体験から書いてみました。 レスポンシブWebデザインは、Web業界に置ける一種の「革命」「明治維新」のような要素があります。いままで、「紙」「静的」的な制作手法でサイトを構築してきました。 しかし、多様化する画面サイズに対応しようとすると、いままでのワークフローではできない。意識改革が必要になります。 仮に100ページ、PC・スマートフォン・タブレットと、いちいちモックを全部作成するのですか？それは現実として難しいです。つまり、いままでのやり方が通用しないのです。 そうなると、「これはいままでと違うのではないか」ということになり、「レスポンシブWebデザイン
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
select要素をlabel要素で囲みます。 今回はアイコンフォントをCDN（コンテンツデリバリネットワーク）のサービスから読み込ませています。「entypo-down-open-mini」というクラスは、アイコンフォントを表示するのに使っています。この部分はclass名を変更したりしてください。 アイコンフォントはコントロールの部品を表示するのに使います。コントロールの部品を表示できるのなら別にSVGでも背景画像でも、ご自由にカスタムするのがいいでしょう。 スケーラブルな表現のために、remを使って拡大縮小できるようにしています。 label要素のクラス「select-wrap」でスタイルを指定します。 select要素に「z-index:2;」、label要素のbefore擬似要素に「z-index:1;」を指定します。 select要素にはpadding以外は背景色、枠線などをすべて
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
今年はできるだけ、「Internet Explorer 9」を窓から投げ捨てる（=サポートを切る）案件を増やしていく予定です。 このサイトもflexboxを使うコードに移行しました。それ以外にも、flexboxをいくつかの案件で使ってみました。そこで得られたノウハウをちょこっとだけシェアさせていただこうと思います。作り方は今回は記載しないのであしからず。 Firefoxで最初に検証しながら制作するのには理由があります。 ちょっと複雑なことをやろうとすると、Firefoxさんだけお行儀が悪くなります。Internet Explorer 10よりもお行儀が悪いです。 同じものをつくるにしても、Firefoxだけできない、できても複雑なコードになることが多くなります。 Firefoxさんにがんばってもらうためのコードを記載しても、ChromeやSafari・Internet Explorerで表
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
サイトをリニューアルしたりするときに、参考にするサイトはどんなのだというのを隠すなとかいろいろと、どこかのUI会社の中の人に言われたので、たまにはどんなサイトを参考にしているかを紹介します。 もちろん案件の費用はもらうけど、開発期間が短くていろいろ問題なので時間をみて空き時間に作ったわけです。こんな機能を。 パララックス（デスクトップのみ） IE10+対応のタッチデバイス判別（誰かのコードをカスタマイズ） ページローディング Webフォント対応のフェードインアニメーション （Webフォントが適用されたときにフェードイン表示） さようなら、jQuery。jQueryを使わないでいろいろ実験してみました。最近は面白いプラグインも出てきていますね。 日本のサイトだとなかなかこれらのものをおしゃれに軽く作っているところがありません。 よって、どうしても海外のサイトを参考にすることが多くなります。
タブレット向けのペーパープロト用ノートをリリースしました ＆ アプリ設計用ピクセル定規プレゼント | fladdict
iPhone版のペーパープロトパッドに続き、リクエストの多かったタブレット版が完成！iPad mini版実寸準拠のA4ノートです。増刷御礼のスマホ版ノートともども、THE GUILDストアから購入可能です。初回ロットは1000部限定生産。 このタブレット用パッド発売を記念して、ご要望の多かったTHE GUILDのピクセル定規（非売品）をプレゼント企画をしようかと。 THE GUILDピクセル定規は、iPhone、iPadのピクセル実寸やミリインチなどが刻印された万能三角スケール。アルミ製にレーザー刻印、100本だけがプロトタイプとして存在する激レア高級グッズ。残り十数本のこの定規を、今回バーンと放出しようかと。 応募方法 応募方法は以下のいづれか4通りから1つを行えばok。複数種を行った場合、当選確率は比例してアップします。 stores.jpから商品を購入する このエントリーをはてぶする
「怒らない技術」より「怒る技術」を身につけたい
私は割と怒りっぽい、というかいろんなことに不満を感じる。でも、上手に怒ることができないので、普段は怒らないようにしている。でもほんまは、もっといろいろ怒りたい。 怒るという行為を避けることはできるけれど、避け続けるとどこかで爆発する。http://news.nifty.com/cs/magazine/detail/po-20140427-12441/1.htmこういう記事を読まなくとも、怒らないようにすることはできる。 怒らないようにしようと心がけると、どうにもそのことから距離をとって、傍観者めいた姿勢になってしまう。そのこと自体から興味をそらし、自分にとってどうでもいいことだと見切りをつけてしまうことで怒りを「回避」してしるだけのような気がする。 あるいは「それはそういうもんだ」ということで受け入れてしまうことで怒りを回避することもある。これはそもそも怒るようなことじゃないんだっていう暗
被リンクは死ぬのか？マット・カッツの話を和訳してみた
Web制作という職業柄、SEOについて問い合わせをいただくことも多いので、YouTubeのGoogle Webmastersチャンネルを購読してよく見ているのですが、見たことある動画を貼った日本語の記事で、被リンク死亡、SEO業者死亡、これからはオーサーランク！というのがソーシャルで流れてきまして（あえてリンクは貼りませんが）、え〜、そんなこと言ってたっけ？と疑問に思ったので、改めてMatt Cuttsの話を聞いてみました。注目されている話のようなので、和訳しておきますね。誤訳があればコメントにてご指摘いただければ幸いです。 今日の質問はNYのLeahからの質問です。「Googleは90年代に、他社がそうしていたようにコンテンツだけで評価するのではなく、バックリンクによってウェブサイトを評価するしくみを導入することによって、検索エンジンのマーケットを変えました。パンダやペンギンアップデート
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
