Font Awesomeを使った星マークのレーティング表示のスマートな方法
こんにちは、社員Kです。 さて本日は、某グルメサイトなどのレビューサイトでよく見る星マークで表示するレーティング表示のHTML/CSSをご紹介します。 星マークの表示は、Font Awesome という無料で使えるアイコンフォントのライブラリを使用してやってみます。 Font Awesomeとは？ 今回、星マークの表示に使用するのは「Font Awesome」というアイコンフォントのライブラリです。 無料で使用できてCSSファイル（またはJSファイル）を読み込むだけで簡単に利用できる非常に使い勝手の良いアイコンフォントです。 今回は最新バージョンの 5.12を使用します。 読み込み方法は、CDNライブラリから下記のように設置するだけ。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-aweso
アナログ印刷でバリアブル印刷みたいに印刷してみた - 株式会社サンコー：おもいをカタチにする仕事｜印刷・WEB・デザイン
写真は「六本木クロッシング2019展」の図録です。この図録は3000冊作られているのですが、実はこの表紙、一冊一冊全て違うんです！企画・製作されたのは加藤文明社さん。加藤文明社さんが運営する、次世代インクジェットデジタル印刷機を備えたプリントスタジオ：atelier grayで、デジタルバリアブル印刷によって製作されています。 今回の実験室は、co-labメンバー限定イベントあえて紙の価値を考える「紙deナイトvol4」に参加していた当社社長が「この図録素晴らしい！これをまねてアナログでバリアブル印刷してみない？」と言い放ったことがきっかけです。その場にいらした加藤文明社の皆様とも盛り上がり実現となりました。印刷実験室担当の私は青ざめていましたが・・・ さて、今回は加藤文明社のお二方も招待しての実験です。 お二方とも、実は隠れサンコー印刷実験室のファン！と言ってくれています（笑） 三河さん
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
『いらすとや』の素材を色覚障がいの視点から見てみた
いらすとやのイラストのこだわりを軽視したらダメ。 いらすとやの素材は反転して使用しても違和感が無いように人物素材に服のボタンやポケットが書かれていない。色々な髪型の、色々な服装の、複数の人物が存在する。種類の豊富さもすごい。 誰にでも親しまれるイラストを書くことの難しさよ。 — 理央 🎊ゆかりっくフェス10/6参戦 (@Rio_M) October 27, 2018 実際に反転してみると、たしかに違和感がない！ ではそんなにこだわっているのなら、色の方はどうなのかな？と思ったわけです。 色覚を変えて見てみる 使った素材はこの３つ。３つめは半分趣味です。 できれば、いつも色覚を変換するときは、TOYO INKの『UDing®』を使うのですが、マシンを新しくしたら使えなくなってしまい…。 P型とD型だけですが、フォトショップの『色の校正』機能で変換しました。 ラーメンを食べる男 麺の部分と洋
カラーピッカー - 原色大辞典
PhotoShopライクなカラーピッカー HEX、RGB、HSBに数値を入力して色を探すこともできます。右側のサンプルをクリックすると個別のカラーサンプルページに移動します。 原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、
新しいプロフィールアイコンのデザイン | Twitter Blogs
この7年の間にTwitterのアカウントを作られた皆さんは、始めのプロフィールアイコンが卵だったのを覚えていらっしゃいますか？これは「卵からスタートし、そこからかえった鳥がタイムラインにツイート（さえずり）をお届けする」という思いを込めてデザインされました。でもそろそろ、皆さんが、ご自分ならではの画像や写真をアップロードしてもっと自己表現したくなってくださるものに変更したいと考えました。そこで、デフォルトのプロフィールアイコンの新しいバージョンのご紹介です。 なぜこのデザインに変更したかを順を追ってご説明しましょう。 これまでブルーやグレー、ホワイトを主な色として使っていたTwitterが、最近、他のカラフルな色も使っていることにお気づきでしょうか？昨年、世界各地からいろいろな情報や考え方が集まるTwitterらしさをより表現できるよう、ブランドをリフレッシュしました。この考え方をプロダク
「HTML5 UP」配布のテンプレートを使おうとしたらグリッドシステムにつまづいた | RCBlog
サイト制作時に、「HTML5 UP」というサイトで配布されているテンプレートを使う機会がありました。 テンプレートにそってパーツをはめこんでいけば簡単に出来るかと思ったのですが、何かよくわからないCSSの書き方があって作業につまづきました。調べていると、テンプレートにはレスポンシブwebデザイン対応のグリッドシステムが使われていることがわかったので、その時の覚え書きをメモに残そうと思います。 .4uとか.8uとか何なの…！！（作業当時の叫び） HTML5 UPについて HTML5 UP! Responsive HTML5 and CSS3 Site Templates HTML5/CSS3で作られたテンプレート（H26.5月現在21種類）を無料で配布しているサイトです。だいたいのテンプレートが、縦長1ページで完結したデザインになっています。レスポンシブwebデザインに対応しているので、
ウェブサイトやブログを制作する時の手書きのワイヤーフレームのまとめ
ウェブデザイナー・ディレクターが実際に、サイトやブログ・ポートフォリオなどの設計をどのように行っているかが垣間見ることができる手書きのワイヤーフレームをDesignbeepからとプラスαで紹介します。 30 Great Examples of Web Design Sketches ちなみに僕は勝負用にA3、携帯用にB5サイズでしゃこしゃこしてました。
これぞ和のデザイン！？分子生物学会の会誌が雅すぎると話題に | THE NEW CLASSIC
先日、「人工知能学会」会誌の表紙が賛否両論を呼び話題となったが、奇抜な表紙を採用している学会は他にもある。中でも「分子生物学会」会誌 Genes to Cells の表紙デザインは群を抜いており、浮世絵に取材した雅なデザインに生物学のモチーフがちりばめられている。これだけの妙案を毎月定期的に出せるというのはタダ者ではない。一体どんな人が描いているのだろう・・・？ 本稿では Genes to Cells の雅すぎる表紙の一部をご紹介する。本稿に掲載しなかった号を含めたバックナンバーは学会の公式webサイトで確認できるので、興味を持った読者はぜひご覧あれ。 水面に映える「二重らせん」橋を通して富士山を遠望する 組み換えて次の世代へ受け継ぐ大相撲 footprintすだれから顔をのぞかせる平安美女 伸びろ微小管街道！届け物資！ 雷神、活動電位を発する！ 風神、「跳躍」伝導する！ 富士を背にDNA
「色相環」とか「トーン」ってどう使うの？配色のコツは「ジャッドの色彩調和論」 | WebNAUT
こんにちは、デザイナーのタカハマです。「キーカラーは決まったけど、色数を増やすと変になる…」「いつも色選びがワンパターン」「色相環ってどうやって使うの？」そんな色選びのお悩みをズバっと解決するかもしれない、配色のコツをご紹介します。また、キーカラー選びの段階から悩んでいる方は、前回の記事（色の基礎知識と色彩心理）が役に立つかもしれませんので、あわせてご覧ください。 「ジャッドの色彩調和論」と配色のための3Step ひとくちに配色理論と言っても、ニュートンやゲーテに始まり多くの学者や画家がそれぞれの持論を展開してきており、これが正しいというものはありません。今回は、その中でも20世紀半ばまでの先人たちの色彩調和論を”4つの原理”にまとめた「ジャッドの色彩調和論」に焦点をあて、配色のための3Stepをご紹介します。 （本記事の内容に明らかな間違いがあれば、ご一報いただければ幸いです。） Ste
デザイナー「佐藤可士和」氏に、経営者が行列をつくる理由。 - AdverTimes.（アドタイ） by 宣伝会議
佐藤可士和氏というデザイナーがいます。佐藤氏は私が在籍していた博報堂の出身ではありますが、特に面識があるわけではありません。ただ、コラムのタイトルにある「経営のとなりにあるデザイン」というテーマを考える上で、佐藤氏の仕事のスタイルは、ひとつの参考になると思っています。 外から見た私の推測ではありますが、今回は多くの経営者が佐藤氏に仕事を依頼する理由とは何か。他のデザイナーとは何が違うのかについて、デザイナーの視点で考えていきたいと思います。私はその理由は3つあると考えています。 「佐藤可士和」さんに関連する記事はこちら 佐藤氏はCI（ここでは、主にロゴ）開発を得意としています。CI開発は、ブランディングファームが得意とする領域ですが、佐藤氏のCI開発アプローチには少しオリジナリティがあります。 CIは企業理念を可視化したものです。しかし佐藤氏の手がけるCIは、そのCIがメディアを介したコミ
白と黒で創られたシンプルですごいWebサイト10選
こんにちは。 バランスにこだわったシンプルなサイトは見ていて飽きないものです。 今回は、白と黒をベースに作られたシンプルですごいWebサイト10個ほど選んでみました。 Kenji Saito Kenji Saito氏のポートフォリオです。 動きを含めバランスも非常に優れています。Flashじゃないのがまたすごい… Mac Pro ゴミ箱などいろんなネタにはされましたが、相も変わらずサイトのデザインは素晴らしいですね。恐れ入ります。 サイト1枚で製品の良さを存分に説明できてますね。 すごいうぇぶ [browser-shot url=”http://sugoiweb.nezihiko.com/” width=”550″] 見た人が口を揃えて「すごい！」といってしまうサイト。面白法人カヤックの佐藤ねじ氏の作品。 本の書き出し 書き出しの1文だけで本を選ぶ事が出来るサイトです。 日本語をうまく使っ
写真構図の教科書 光で思いどおりに描くための写真の手引き
大好評発売中の『写真の教科書』『写真撮影の教科書』『カメラの教科書』に続くシリーズ第四弾です。カメラの基本的な操作や機能は覚えたけれど、思いどおりに撮れない、いつも同じような写真になってしまう、と感じてはいませんか？ 本書は日本写真学院で講師を務める著者が、撮影の上達に欠かすことのできない「構図」と「光」という2つの要素について、基本的な知識とそれを生かしたテクニックやコツをわかりやすく解説しています。イラストや図版を交えながら、光についての基本や構図法について丁寧に解説しているので、苦手意識のある人でもきちんと理解することができます。また、実践的なテクニックを魅力的な写真とともに紹介しており、基本がどのように撮影に生かされているのかがよくわかります。光を意識し、それを生かした構図を考えることができるようになれば、表現の幅が広がり、写真をより魅力的に仕上げることができます。すてきな写真を思
Create a New Retro Text Effect in Photoshop - Web Design Ledger
Tutorials Create a New Retro Text Effect in Photoshop JdaviesOctober 7, 200933 Comments17.4k Faking aged, printed media has been massive since the ‘grunge’ style first became mainstream years ago. Textured work with a vintage feel is still very popular, but more recently it’s the ‘new retro’ style that’s captured the imagination. The general idea is to create a vision of the future… from the past.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用フリーで使える影絵素材サイト シルエットデザイン
「目に見えない」自転車用ヘルメット：スウェーデンの女子大生が発明
ウープスデザインブログ
今年のWebデザイントレンドはベタ塗り！フラットなデザインのWebサイト
紙の展覧会｜竹尾 TAKEO
ロゴストックのロゴデザイン採用ロゴ発表