タグ

ブックマーク / webcre8.jp (8)

  • リガチャー(合字)を使うとき必要なCSSプロパティーの解説

    どちらかというとこっちが題だったんですが、文章が長くなる感じだったんで分けてみました。リガチャーアイコンフォントを使うにはまずはWebフォントの指定を知ってから、という感じですね!というわけでWebフォントCSS指定について知りたい人はWebフォントCSS指定2014年度版とこれまでの歩みを読んでみてください。 リガチャーアイコンフォントの実例 もともと私がリガチャーアイコンフォントというものを知ったのは@fladdictさんのアイコンを合字Webフォントとして扱うSymbolSetが革新的にステキ | fladdictという記事でした。ここで紹介されたSymbolsetを知ったときはかなりの衝撃を受けました。 そして@kudakurageさんが制作したLigature Symbolsなどの登場もあり、アイコンフォントには実装の多様性が生まれたように思います。 以下はデモです。 Se

    リガチャー(合字)を使うとき必要なCSSプロパティーの解説
    shields-pikes
    shields-pikes 2014/09/25
    iPhone6とplusの登場でますます画面サイズが増えまくって、ベクターのアイコンフォントを使うことが必須になって来たので、こういうテクニックは参考になるなー。
  • [UI]ボタンというインターフェイスの向こうにあるもの

    Facebookのいいねボタンというのを私はすごくいいシステムだと思っています。以前も「いいね」は現時点で一番心理障壁の低いアンケートであるという記事も書きました。手軽ということには簡単にスパムまがいのことが出来てしまうというような弊害もありますが、それでも友人がいいねしているかどうかを価値の判断基準として使えるのはやはり便利です。 いいねを押すという行為の利用者にとっての意味 利用者は、Facebook上またはWebで何かコンテンツを見たとき、それが良いと思ったらいいねボタンを押すことで、そのコンテンツに対する好意を表明することが出来ます。 いいねを押した人は単にその投稿やコンテンツに対していいねという感情を持っただけであり、普通その行為にそれ以上の意味はないと思います。 Facebokで実際に起こること 実際にいいねをあるFacebookの投稿に対して押すと、その投稿が自分の友達のタイ

    [UI]ボタンというインターフェイスの向こうにあるもの
    shields-pikes
    shields-pikes 2014/01/14
    いいね!ボタンは「投稿への賞賛リアクション」「Facebookページの購読」「Webページの共有」という3つの機能をひとつに強引にまとめたものなんだよね。「いいね」という絶妙の翻訳は英語の「Like」より優れてるなあ。
  • [レビュー]HTML5マークアップ 現場で使える最短攻略ガイド — 仕様を解説する先生のような本

    はましゅんさんはについては私が以前からWebでのASCIIの連載をよく読んでいて、縁があって話をさせてもらうことが出来たんですが…その後私もレビュアーの一人としてこのの制作に関わらせて頂くことになったわけです。 レビュアーにはこちらも以前からWebサイトを見ていてお世話になってきていたピクセルグリッドのよもつさん(@yomotsu)さん、HTML5jマークアップ部の活動でもお世話になっているやくらさん(@myakura)さんといったメンバーと一緒のこの作業をするわけで…私としてはすっごいテンションの上がる仕事でしたねー。 今回は出版元のアスキー・メディアワークス様からこのを頂きました。担当の小橋川さんに心よりお礼申し上げます。 では、制作に関わったため熟読している私からこのの特徴をレビューさせて頂きます★ 内容 このの内容は以下のようになっています。 [導入編]これだけは押さえたい

    [レビュー]HTML5マークアップ 現場で使える最短攻略ガイド — 仕様を解説する先生のような本
    shields-pikes
    shields-pikes 2013/12/25
    @glatyou さんも執筆に関わった、実践派のHTML5本が発売されたっぽい。HTML5 KARUTAが付録でついてくるから、それだけでも元取れる気がする。年始に遊べそう。
  • [資料]あのWebサービスは今…過去2年間で世に送り出されたWebサービスのその後

    これまでのWebサービスまとめ WEBCRE8.jpは、ブログが開始してほどなくして、その月に生まれた(または日の目を見た)サービスを紹介していくコーナーを始めました。なかなか面白いんですけど、結構しんどいです。 さて、毎月毎月平均して2~30程度のWebサービスやコンテンツが生まれてくるわけですが、それらのサービスは今、どうなっているのでしょう。ちょっとデータを作ってみましょう。 あ、一応今まで書いたまとめ記事をまとめておきます。 2011年8月のWebサービスまとめ 2011年9月のWebサービスまとめ 2011年10月のWebサービスまとめ 2011年11月のWebサービスまとめ 2011年12月のWebサービスまとめ 2012年1月のWebサービスまとめ 2012年2月のWebサービスまとめ 2012年3月のWebサービスまとめ 2012年4月のWebサービスまとめ(前編) 201

    [資料]あのWebサービスは今…過去2年間で世に送り出されたWebサービスのその後
    shields-pikes
    shields-pikes 2013/06/27
    これはWebサービスの動向を、長期間定点観測してる人ならではの記事。なかなか書けるものじゃないです。素晴らしい。
  • [webデザイン]スキュアモーフィックデザインとフラットデザイン、リアリズムとミニマリズム - WEBCRE8.jp

    私はデザイナーとして、流行りのデザインにとても詳しいという訳ではありません。今気持ちはHTML5やwebサービスの作成等、どちらかというとテクノロジーの方に興味が強くなってしまっていて、インプットの種類もかなりそっち寄りに…デザイナーと名乗るのがちょっと恥ずかしくなってきてますw で、とはいえデザインとかデザインに関する事を考えるのはすごく好きだったりします。 今回は最近読んだ記事のいくつかで、ここのところ流行りの兆しを見せているフラットデザイン、そしてその対極とされているスキュアモーフィックデザインについて色々考えていたことの理解が進み、ある程度頭の中で整理できたので、ちょっと記事にしてみようかなと思ったわけです。 言葉の定義で戦うのはあんまり好きじゃなかったりしますけど、この辺りの事を頭に入れた上で話をするのは有意義なのではないかなと思ってます。解釈のおかしなところなどご指摘ありました

    [webデザイン]スキュアモーフィックデザインとフラットデザイン、リアリズムとミニマリズム - WEBCRE8.jp
    shields-pikes
    shields-pikes 2013/06/11
    面白い視点。2軸の分け方は、色々考えられそう。シンプルでミニマルになっても、わかりにくくなったら、本末転倒だからなー。俺のブログが引用されてた! ありがとうございます。
  • ゴールデンウィークに試そう!! 2013年上半期webサービス100連発!!

    http://zzhh.jp/ ゼゼヒヒは、生活における様々なことについて賛成か反対か、どちらがいいか等の決とその理由を投稿する生活に関する投稿サイトです。 SoundGator ジャンル:音声 種別:素材サイト SoundGatorは、フリーで効果音を視聴・ダウンロードし制作に使う事が出来る音声に関する素材サイトです。 楽しいBADUIの世界 ジャンル:デザイン 種別:情報サイト 楽しいBADUIの世界は、世の中にある使いづらいUIのものを紹介するデザインに関する情報サイトです。 ブコメヨム! ジャンル:情報収集 種別:webサービス ブコメヨム!は、はてなブックマークで話題になった記事のブックマークコメントを手軽に読める情報収集に関するwebサービスです。 paprika images ジャンル:写真 種別:素材サイト paprika imagesは、カメラマンが撮影したあまり出回らな

    ゴールデンウィークに試そう!! 2013年上半期webサービス100連発!!
    shields-pikes
    shields-pikes 2013/05/02
    新しいWebサービス、ジャンル別に100個もまとまってて良い感じ! じっくりチェックしたい。
  • [クリエイティブ]HTML5アイコンのクッキーを作りました

    いやー久しぶりのクッキー作りです。今回はHTML5で、もちろん金型から作ったわけですが、久しぶりすぎて上手くいかないわ、味もちょっと失敗だったかもです…w アイコンクッキーを作る!これまでのあらすじ かなり久しぶりにクッキー作りました。以前からこのブログを見ていた人はご存知かと思いますが、私は何かのイベントのときに、そのイベントにまつわるサービス等のアイコンの形のクッキーを焼いて持っていったりしていました。評判は、悪くはないのではないかなー…と思いますw

    [クリエイティブ]HTML5アイコンのクッキーを作りました
    shields-pikes
    shields-pikes 2013/04/19
    これいいなー。次はアイコン金太郎飴とかアイコンかまぼことか作って欲しい。
  • [デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した

    角丸の話題が盛り上がってましたね 先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました! デザイン時に注意したい角丸の使いかた | Design Color そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書いたりしていました。 illustratorで角丸を扱う際の注意点 ※追記しました | ナナメウエblog 私も以前デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素という記事を書いたとき、角丸についてはさらっと触れるに留めたのですが、いずれもっとがっつり言語化したいものだと考えていました。 気になることもあったし、ちょうど良いので今回便乗して記事にしてみようと思います。 形状としての

    [デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した
    shields-pikes
    shields-pikes 2013/02/27
    角丸についての、これでもかと言うくらい丁寧な考察記事。素晴らしい。動きそうなものは角丸、ってのも物理法則にあってる。摩擦少なそうだし。
  • 1