和筆の繊細な線、面をつかった大胆な線、ぼかしの濃淡で明るさや暗さを表現できる、イラストレーター・絵師さん向けのIllustrator用ブラシ素材を紹介します。 今回もコリス限定ライセンスで、商用利用無料でダウンロードできます。すぐに使わなくても、今のうちにダウンロードしておくのがオススメです。 ※通常は個人利用のみ無料です。 商用無料の期間は終了しました、現在は個人利用のみ無料です。 Japan ProBrush™ Free プロ仕様の和筆ブラシ ブラシのダウンロードとインストール プロ仕様の和筆ブラシ Japan ProBrush™はコリスとのコラボを重ねて、日本人のユーザーのためのブラシをということで制作されたプロのイラストレーター・絵師さんの使用を意図した高品質なブラシセットです。

ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。 normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。 ress -GitHub 参考: normalize.cssの特徴とコード 2015年、Web制作者が押さえておきたいCSSの各種リセット ressの特徴 ress: html, グローバルセレクタの定義 ress: 一般的な要素の定義 ress: フォーム要素の定義 ress: メディア要素の定義 ress: アクセシビリティ用の定義 ress: ::selectionの定義 ressの特徴 ressは「normalize.css」をカスタマイズしたもので、スタイルシートを始める時のしっかりしたベースな

Adobe Photoshop CC 2015.5のアップデートは正確な切り抜きや選択範囲が簡単にできたり、切り抜きツールのコンじる、フォントのロード時間短縮など、便利な新機能が満載ですが、その中でも見過ごしがちな、でも非常に便利な新機能を紹介します。 グラフィック的に派手な機能に目がいきがちですが、ここで紹介する機能を待ち望んでいた人も多いと思います！ Adobe Photoshop ※Adobeの画像の掲載にあたり、Adobeの広報様に許可を頂いています。 CC 2015.5の新機能については、下記ページをご覧ください。 Photoshop CC 2015.5 新機能のまとめ Photoshopの選択範囲や切り抜きはこれが一番簡単で正確！CC 2015.5で進化した選択範囲とマスクの作成 気がつかずに見過ごしていたのは、はい、私です。 テスターから絶賛を受けた便利な新機能 テスターから

Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか？ PJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトを紹介します。 Barba.js Barba.js -GitHub Barba.jsのデモ Barba.jsの使い方 Barba.jsのデモ Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。 ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。

<div class="wrapper"> <div class="slides"> <div class="slide"> <div class="title">Pure CSS z-scrolling</div> </div> <div class="slide"> <div class="title">Slide 1</div> </div> <div class="slide"> <div class="title">Slide 2</div> </div> <div class="slide"> <div class="title">Slide 3</div> </div> <div class="slide"> <div class="title">Slide 4</div> </div> <div class="slide"> <div class="title">Slide

明治や昭和のレトロな雰囲気が感じられる、どこか懐かしい温かみのあるフリーの日本語フォントを紹介します。 最近バージョンアップされたフォントも多いので、要チェックです！ マキナス Scrap 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 1920～30年代のポスターで使用されていた文字を参考に制作したフォント。 2016年に大きくバージョンアップされ、以前は漢字が180文字程度でしたが、JIS第一水準（2965字）　JIS第二水準（3390字）などに対応し、収録字数は約6,600字に！ ひらがなやカタカナもリデザインされています。 使用頻度の少ない漢字を除いた「マキナス for WEB」も無料でダウンロードできます。 マメロン 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 漢字はマキナス Scrapで、丸いひらがなを組み合わせた「豆」でもない「メロン」でもない、丸

Webサイトやアプリの背景に、写真やイラストに重ねたり、動画やゲーム、そしてフライヤーや同人誌などの紙デザインにも利用できる1,600種類の背景素材を紹介します。 しかも、商用利用できる背景素材全1,600種類をコリスのビジターにプレゼント！ 使用頻度の高いブラー・水彩・ヴィンテージの背景をはじめ、グリッド・ポリゴン・インクなど珍しい背景まで多種多様な背景が揃っています。 応募期間は、2016年6月30日で終了しました。 Massive Background Bundle プレゼント商品 応募期間 応募要項 当選発表 提供元のGreedealsでは、WordPressやBootstrapのテーマをはじめ、アイコンやフォントなどの有料素材をセットや限定特価で扱っています。 今回のプレゼントは、Greedealsで人気の背景素材セットです！ プレゼントはそれと全く同じものです。 Massive

Webページやスマホアプリのレイアウト、ワイヤーフレーム、ガイドライン、ブランディング、アイコン、ロゴ、イラスト、モーショングラフィック、イラスト、キャラクターデザインなど、もうデザインに関するすべてと言っていいくらいのさまざまなモックアップ140+種類が揃った無料素材を紹介します。 数や種類がすごいだけでなく、そのクオリティも素晴らしく、商用のプロジェクトでも無料で利用できます。 Large ダウンロードできる素材 素材のダウンロード方法 ダウンロードできる素材 ダウンロードできる素材のフォーマットはPSDで、各コンポーネントごとにレイヤーで管理されています。プレビュー用のPNGも付いています。 140+種類の中から、いくつか紹介します。 サムネイルはイメージなので、本当にほんの一部です。

2016年6月20日に、AdobeのCreative Cloudがアップデートされました。バージョンは、2015.5と「.5」がついただけですが、前回の2015.1から、4つ飛ばしになり、新機能がかなり搭載されています。 Photoshop CC 2015.5の魅力的な新機能を紹介します。 誰もが恩恵を受けるのは「フォントリストの読み込みが4倍速」になったことでしょうか。これによりロード時間が圧倒的に早くなりました！ 地味ですが、こういうアップデートは非常に嬉しいですね。 Adobe Photoshop ※Adobeの画像の掲載にあたり、Adobeの広報様に許可を頂いています。 Photoshopで「カワイイ」「笑顔」「小顔」が簡単に作れる 「コンじる」が大幅にパワーアップ、新機能も登場 正確な選択範囲とマスクの切り抜き作成が簡単に、しかも速い 字形の機能が強化、フォントのスワッシュも簡単

お馴染みの freepik.com 提供によるベクター素材をコリス限定で全員にプレゼント！ もちろん個人でも商用でも無料で利用できます。 今回は、緻密に描かれた美しい飾り罫のベクター素材です。 freepik.comはウェブやグラフィックデザイナーのためのベクターやイラストやPSD素材の検索エンジンで、日本語環境でも利用できます。アイコンに特化したflaticon.comも運営しており、そのアイコン素材はついに161,000個になりました。 ものすごい勢いで増えています！ freepik.comでアイコンの検索する時は、下記のページからが便利です。 freepik.comでアイコンを探す またfreepik.comは、そのブログだけのオリジナルの素材を配布するコラボをしています。日本ではコリスが初、今回でいよいよ第27弾となりました！ 第21弾〜26弾まではこちら。 ※長いので、1〜20は

水彩素材の使い方PDFも！ 素材のライセンス ダウンロードできるフォントは個人でも商用でも無料で、Webサイト・アプリをはじめ、ポスターや同人誌などの紙、パッケージ、Tシャツなどに利用できます。ただし、素材自体の再配布や再販売は禁止です。 詳しくは、ダウンロードファイルの「DesignTNT-readme.pdf」をご覧ください。 ダウンロード方法 ダウンロードするには登録（無料）、もしくはメールアドレスが必要です。 まずは、下記ページにアクセスします。

黄金比や黄金螺旋を使い、Webサイト、雑誌や同人誌の表紙、フライヤーなどのレイアウト、コンテンツの配置、余白のとり方、写真の構図、オブジェクトの形のデザインにうまく取り入れるデザインテクニックを紹介します。 以前に1,000ブクマ越えの「黄金比をサイトのデザインに取り入れる簡単な３つの方法」を記事にしましたが、黄金比の取り入れ方もいろいろ進化しています！ What Is The Golden Ratio? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 黄金比（Golden Ratio）とは 1. 黄金比をレイアウトに使う 2. 黄金比をスペースに使う 3. 黄金比をコンテンツに使う 4. 黄金比を写真の構図に使う 5. 黄金比を形に使う エジプトのピラミッド、ダヴィンチのモナリザ、これらとTwitterやペプシのロゴとの共通点は何で

PhotoshopのPSDファイル、GimpのXCFファイル、JPEG, PNG, GIF, BMP, WebPなどの画像ファイルを開き、編集もできてしまう無料のオンラインサービスを紹介します。 UIは簡易版Photoshopという感じで、PSDのレイヤーやグリッド、エフェクトなども読み込むことができます。 そのレイヤーやグリッドやエフェクトを編集することももちろん可能です。 Photopea 写真: ぱくたそ 対応ブラウザの明記はありませんが、Chromeでアクセスすれば問題ないでしょう。利用にあたっては完全に無料で。登録など面倒なことは必要ありません。 さっそく、昨日の「ワイヤーフレームやフローチャートに使える素材のまとめ」でダウンロードしたPSDファイルで試してみました。 通常のアプリと同様に「File:: Open」からファイルを選択して開きます。

最近のWebサイトで使われているさまざまなレイアウト、ヘッダやフッタやナビゲーションやコンテンツのパターンがキット化されたワイヤーフレームやフローチャートを作成するのに役立つ無料素材を紹介します。 ランディングページや縦長ページをはじめ、コマースサイト、企業サイトなど、多種多様な案件に対応できます。スマホ用ナビゲーション100種類とかは勉強にもいいですね。 Platforma Web Wireframe Kit(.psd, .ai, .sketch) 最近のWebサイトで使用されているさまざまなコンポーネントがキット化されており、組み合わせるだけでさまざまなページのワイヤーフレームを作成できます。無料版と有料版があり、無料版でもかなりのボリュームです。 iOS Wireframe Kitも無料でダウンロードできます。

Adobe Experience Design（以下、Adobe XD）の評判はいいって聞くけど、実際のところどうなの？ 使えるの？ そんな疑問がすっきりするAdobe XDで何ができるのか、Webサイトやアプリのワイヤーフレームやプロトタイプを作成するのに便利な機能を紹介します。 Wireframing and Prototyping in Adobe XD 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 UI/UXデザインに適したツールを探して Adobe XDとは Adobe XDのアートボード Adobe XDのシェイプ操作 Adobe XDのオブジェクトのグループ化 Adobe XDのリピート グリッド（Repeat Grid） Adobe XDのエクスポートとインポート Adobe XDでプロトタイプを作成 Adobe X

非常にシンプルなHTMLで、Flexboxの特性をうまく使い、Media Queries無しでレスポンシブ対応のレイアウトを作成するCSSのテクニックを紹介します。 スマホ時はサイドバーを下に落とすレイアウトなど、利便性が高いと思います。 Using flexbox to make responsive widgets without media queries. デモでは、デスクトップの2カラムでは右のカラム（ピンク）が300px固定で、左のカラム（グリーン）が最小幅400pxを下回ると、垂直方向に積み重なります。積み重なった時は、2つのカラムは100%で表示されます。

WordPressのどんなテーマファイルでも、どんなページでも、どんなデザインでも、ページごとに自由なレイアウトを作成できる便利なプラグインを紹介します。 これ系のプラグインは有料が多いですが、レスポンシブ対応で高性能、そして無料というのはありがたいですね。 Elementor Elementor -wordpress.org Elementorの特徴 Elementorのインストール・使い方 Elementorの特徴 Elementorは、どんなテーマファイルを使っていても、どんなページでも、どんなデザインにでも適用できます。 大きな特徴はコードの知識は不要、ドラッグ&ドロップで要素やコンポーネントを配置し、簡単に調整できます。 自身のブログやポートフォリオに使ってもよし、クライアントが自由にレイアウトをしたい時にもいいですね。

パソコンにインストールされている日本語フォントや英語フォント、オンラインのGoogleフォントで、2つのフォントの字形の相違を比較できるオンラインサービスを紹介します。 glyphdiff glyphdiff -GitHub glyphdiffを利用するには、Chromeがベストです。 Firefoxではレタースペーシング、SafariではJSによるクリップボードのコピーが非サポートです。 当ブログで紹介したことがあるフォントで試してみました。 比較する文字「いろは」は、ひらがな・カタカナ・漢字・英数記号文字に変更できます。

Google Mapをはじめ、YouTube, Vimeo, Vine, TEDなどの動画、SpotifyやSoundCloudなどの音楽、GitHub, CodePen, JS Binなどのコードなど、さまざまなメディアをWebページに簡単に埋め込むことができるスクリプトを紹介します。 :heart:（ハート）や:smile:（スマイル）などの絵文字を使ったテキストを埋め込めます。 リンクを検出して、bit.ly, buff.ly などの短縮URLに置き換えます。 Twitterのツイートを埋め込みます。 YouTubeやVimeoの動画をAPIから取得して埋め込みます。 dailymotion, vine, TEDなどの動画共有サービスもサポート。 SpotifyやSoundCloudなどの音楽サービスもサポート。 HTML5プレイヤーにサポートされた音楽ファイル（.wav, .mp3

写真やイラスト、文字などに不透明度を調整してオーバーレイで重ねて使うと、レトロ風やグランジ風のいい感じに仕上げるハーフトーンのテクスチャやパターン素材を紹介します。 .png, .eps, .aiから、.pat, .abrまで、さまざまなフォーマットをまとめました。 まずは、オンラインでさまざまなハーフトーンのパターンを作成できるサイトから。 Halftone Pro 登録無し無料だと、PNGでダウンロードできます。ベクターは有料。 ここから下は、PhotoshopやIllustratorで使えるハーフトーンの素材です。 すべて商用利用無料です。