デザインの基本: フォントのカーニングとは、カーニングの基本的なやり方 | コリス
Webでも紙でも文字のデザイン、タイポグラフィは非常に大きな存在です。 文字のデザインで基本となるカーニングについて、基礎知識から基本的なやり方、CSSでのカーニングのやり方までを紹介します。 The Ultimate Guide to Kerning 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 この画像のどこがおかしいか カーニングとは カーニングの基本的なやり方 カーニングはいつ必要なのか カーニングではないもの CSSでカーニング 終わりに この画像のどこがおかしいか この画像のどこがおかしいのか、経験の浅いデザイナーは頭をひねるかもしれません。
Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス
スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。 実装が簡単 スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。 超軽量 1KBの超軽量ライブラリ。 依存は無し スクリプトは単体で動作し、他スクリプトへの依存は一切ありません。 ブラウザのサポート IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。
[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ
![[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts](https://cdn-ak-scissors.b.st-hatena.com/image/square/b793c623eb3187e192351b9611f75aea908bbf46/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080101-02.png)
これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
無料で商用利用できるSVGのフリーアイコン4,500種類、デザインに合わせたカスタマイズもできるのはすごい！
企業サイトをはじめ、コマース、アプリ、メディア、ブログなど、さまざまなUIデザイン用のアイコンが無料でダウンロードできるOrion Icon Libraryを紹介します。 その数はなんと4,500種類以上！ 豊富なデザインに加え、カスタマイズにも対応しており、ストロークを鋭角や角丸にしたり、太さを変更したり、カラーを変更することもできます。
Lightroomに絶対入れておきたい！すごい無料プリセットのまとめ
プロのカメラマンが写真画像をレタッチする時に使用しているものから、カメラスクールで提供しているものなど、写真画像が見違えるLightroomの無料プリセットを紹介します。 どんなアングルで撮影した写真でもOKです！
ひらがなで書くべき漢字のまとめ: 企業サイトで使用する「ひらく漢字」「ひらかない漢字」
これまでに数多くの一部上場企業様のWebサイトのリニューアル・サイト制作にコアメンバーとして参加し、その中で表記ルールもかなりの数を策定してきました。策定時のベースに使用する「ひらく漢字」「ひらかない漢字」の一部を紹介します。 ※以前、公開した記事を再編集したものです。 表記ルール: ひらくことが多い漢字 表記ルール: ひらくことを検討する漢字 表記ルールの策定にあたり 表記ルール: ひらくことが多い漢字 ひら（がなで書）くことが多い漢字。 ※「正・誤」は使用する際の基準であり、日本語としての「正・誤」ではありません。 読み 正 誤
これで無料とはすごい！Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketchでの下準備 Zeplin ソフトウェア版 for OS X Zeplin ブラウザ版 for OSX, Win, Linux Zeplinのインストール Zeplinの特徴 Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア（無料）とオンラインサービス（無料と有料）です。 無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
ブックマークしておきたい、Bootstrapの商用利用無料のテーマがダウンロードできるサイトのまとめ
コーポレートサイトやスモールビジネスから、ランディングページ、プロダクトページ、ポートフォリオやギャラリーなど、BootstrapをベースにしたWebページが簡単に作成できる無料のテーマがダウンロードできるサイトを紹介します。 テーマとして利用するだけでなく、制作のインスピレーションにもいいですね。 Peter Finlan 縦長ページにかっこいいスクロールエフェクトやアニメーションを加えた今時のWebページが実装できます。デザインも非常にかっこいいものが揃っています。
ブックマークしておきたい、いい感じの写真画像がクレジット表記無しで無料利用できるサイトのまとめ
個人でも商用でも、クライアントのプロジェクトでも無料で利用できる高品質な写真素材がダウンロードできるストックフォトサイトを紹介します。 27個のサイト、すべてクレジット表記やバックリンクの必要がないので、非常に利用しやすいと思います。
HTML5とCSS3を職として身につけたい人が最初に読んでほしいオススメの本 -HTML5+CSS3の教科書
HTMLとCSSはWeb制作の中では敷居が低く、あまり詳しくなくてもWebページやブログなどを作成することができます。しかし職として考えた時は、必要な知識をしっかりと身につけたいものです。 HTMLってそもそも何なのか、どうして正しくタグをつける必要があるのか、CSSを使う意味は何？ といった基本から、実装でなぜこのタグを使うのかこういうテクニックを使うのかといったことまで、必要な正しい知識をしっかりとマスターできるコーディングをまじめに取り組みたい人にオススメの本を紹介します。 書店に並んでいる多くのHTML5とCSS3の書籍の中から自分にあった本を探す時は、必ずこの本も加えて検討してみてください。
最近のUIデザインで使われている同一色相のグラデーションなど、人気のあるカラーのまとめ | コリス
落ち着いたパステル系のカラー、同一色相の繊細で美しいグラデーションなど、Material Design, iOS 8, Modern UIなどやフラットなスタイルで使われている最近人気のあるカラーを紹介します。 PhotoshopやIllustrator用のスウォッチもダウンロードできますよ。
[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル
ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモページをスクロールしたとこ パララックスの構造の可視化は、左上の「Debug」をチェックします。 パララックスの実装 Step 1: HTML divなどで各レイヤーを配置します。 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ..
![[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a7f8ebcbac962aaeb8aafa79af88e7fa1ccc7c0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082002.gif)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ヤバイ便利すぎる！Googleが提供するすべてのアプリ・サービスを1クリックで利用できるChromeの機能拡張
日本語のフォントを使って、ロゴやタイトルをデザインする時のアイデアとすぐに役立つデザインのテクニック
ブルマがすごい！外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma
デザインの勉強にいい！有名ブランドのガイドラインのまとめ
Web制作者はおさえておきたい！CSSの基本テクニックから実務に役立つ便利ツールまでのまとめ
Bootstrap 3をベースにしたフラットなかわいいデザインのHTMLとPSDが揃ってる無料のUI素材 -Druken Parrot UI Kit
このクオリティはスゴイ！JPEG, GIF, PNG画像をベクターに変換する無料のオンラインサービス -PicSVG
