イラストや絵で線の描き方、空間のつくり方、動きの表現、なぜこう描くとうまくなるのかがよく分かる -アニメーターが教える線画デザインの教科書
絵の描き方を扱った本の多くは「こう描けばうまくなるよ」というものが多い中、「なぜこう描くとうまくなるのか」と絵の上達方法をくわしく、そして分かりやすく徹底的に解説されたオススメの本を紹介します。 映画攻殻機動隊やヱヴァンゲリヲン新劇場版など、数多くの商業作品に携わったプロのアニメーターが解説する、ペン・筆・アプリ・液タブに頼らない線画デザインの手法や理論を学ぶことができます。 刊行されている線画デザインの教科書は現在、2種類。 アニメーターが教える線画デザインの教科書 Amazonでみる アニメーターが教える線画デザインの教科書 2: キャラクター創造編 Amazonでみる 本書は頭の中で描いたイメージをどのように線画デザインで表現するか、線の使い方、空間のつくり方、動きの表現方法など、こう描くとなぜうまくなるのか、その手法と理論をしっかり身につけることができます。 それぞれ内容は異なりま
最近のWeb制作で利用されている、リセットCSSとノーマライズCSSのまとめ
HTMLの各要素のブラウザごとに異なる差異をなくすために、ブラウザのスタイルを初期化するリセットCSS、初期化ではなくノーマライズ（正常化）するノーマライズCSS。 定番のスタイルシートから、最近リリースされたものまで、リセットCSSとノーマライズCSSを紹介します。 イラスト: Girls Design Materials 定番も最近のWeb制作にあうようバージョンアップされており、Web制作者は要チェックです！ 下2つは通常のリセットとは異なるアプローチのスタイルシートです。 ress Normalize.css sanitize.css Marx Reset CSS minireset.css css-wipe Cleanslate Unreset CSS ress -GitHub normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、ブラウザごとに異なるH
パワーポイントや同人誌などでの見栄えがグッとよくなる日本語のフリーフォント -源真・源柔ゴシック
自家製 Rounded M+の作者様がこの夏、新たにリリースされた普段使う時でも見栄えがグッとよくなる日本語のフリーフォントを3つ紹介します。 もちろん個人でも商用でも無料で、Webでも紙でも利用でき、成果物またはその派生成果物のコピーを複製したり頒布することもできます。 源真ゴシック・源柔ゴシックは先日Adobeからリリースされた「源ノ角ゴシック」をベースに、ビジネスやホビーなどでの使い勝手を重視し、細部を改善したフリーの日本語フォントです。 フォントはOpenTypeではなくTrueTypeで用意されているので、パワーポイントのスライドなどにもフォントの埋め込みができるようになっています。 パワーポイントのスライドにフォントを使用 プロポーショナルフォント（等幅フォントも）が用意されているので、そのまま文字を入力するだけで、間延びせずいい感じに詰められて表示されます。 「フリーフォント
[JS]なにこれ楽しい！インタラクション満載の路線図を実装するスクリプト -transitive.js
路線図の入り組んでいるところって、分かりにくいですよね。 そんな問題を解決するCanvasで実装するインタラクション満載の路線図のスクリプトを紹介します。 ↓くっついてて分かりにくい箇所も、こんな感じに移動できます。 デモページ 上のアニメーションgifみたいに移動させることだけでなく、ホイール操作での拡大縮小やドラッグ操作などもできます。 路線図は各要素（駅やルートなど）のテキストファイルを元に、Canvasで描画されています。 各要素のデータ（オレンジのルート）はこんな感じです。 "route": "ORANGE", "from": "12488", "to": "7588", "fromName": "COURTHOUSE METRO STATION", "toName": "METRO CENTER METRO STATION", "routeShortName": "Orange
ウェブページで使用される最近のさまざまなコンポーネントをまとめたPSD素材
ヘッダやフッタ、打ち出しエリア、コンテンツエリア、ポートフォリオ、お問い合わせなど、縦長1ページで使用されるさまざまなコンポーネントを収録したワイヤーフレーム用のPSD素材を紹介します。 プロトタイプを作成する時にゼロから始めるのではなく、こういったリソースをブレーンストーミングの際のベースにするのもいいですね。 One page website wireframes ダウンロードできる素材のフォーマットはPSDで、シェイプで作られているので、カラーやサイズ、配置の変更も簡単に行えます。 そのコンポーネントの一部を下記に紹介します。
最近のウェブデザインのトレンドを取り入れたページレイアウトのPSD素材のまとめ
ただ見ているだけでもその美しいレイアウトに惚れ々々してしまう、最近のウェブデザインのトレンドを取り入れたウェブページやスマフォページのPSD素材を紹介します。 PSDが全部ダウンロードできるので、実用にも勉強にも役立ちます！
商用利用無料、シンプルなアウトラインが非常に美しいアイコン素材 -150 Outlined Icons
ウェブサイトやアプリで使うさまざまなアイテムが揃った、シンプルな美しいアウトラインで作成されたミニマルなアイコン素材を紹介します。 フォーマットはPSD, AI, SVG, Icon Fontと全て揃ってます！ 150 outlined icons – PSD AI SVG Webfont ダウンロードできるアイコンのフォーマットは全てベクターで、4種類が揃っています。 .psd .ai .svg フォント（.woff, .eot, .ttf, .svg） あらゆる作業環境でそのまま使用できますね。 アイコンのアイテムは全部で、150種類！ ウェブサイトやブログ、アプリでよく利用するアイテムが揃っています。
Illustratorで文字をかっこよくデザイン！タイポグラフィのチュートリアルのまとめ
アートワークとして見るだけでもよい刺激を受ける、そんな素晴らしいタイポグラフィ・テキストエフェクトのチュートリアルをまとめてみました。 解説は英語ですが、苦手な人でも各ステップごとにキャプチャが付いているので分かりやすいと思います。
ウェブデザイナーの勉強にいい！デザインの基本原則からPhotoshopの実践的なテクニックまで学べる無料のeBook -Pixel Perfect Precision 3
デザイナーさん・ディレクターさんをはじめ、ウェブデザインに携わる全ての人に必携です！ デザインの基本原則をはじめ、Photoshopを使った実践的なさまざまなテクニックが学べるeBookを紹介します。無料なのに市販の書籍に負けない、いや人によってはそれ以上の価値ある内容がぎっしり詰まってます。 Pixel Perfect Precision 当ブログでもお馴染みのPixel Perfect Precisionの第3版が、昨日リリースされました（パチパチパチパチ） 内容も大きくバージョンアップし、ページ数も165ページから214ページへと大増量。 デザインにおける、配置の基本原則、可読性を考慮したテキスト、カラーマネジメントなどをはじめ、ファイルの効率的な管理方法、Photoshopでのウェブに最適な初期設定、レイヤー管理、Illustratorのウェブで使える実践的なテクニックなど、満載の
紙の質感にこだわったグランジスタイルのテクスチャ素材
画像に不透明度50%オーバーレイで重ねてみました 写真：Snowboard Jump ダウンロードできる素材は10種類！ サイズは3,000x2,000pxの高解像で、フォーマットは.jpgです。 その中からいくつか紹介します。
[JS]jQueryのプラグイン100選 -2012年総集編
2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。 スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 ナビゲーション関連 レイアウト関連 レスポンシブ関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
今時のデザインのウェブサイトの作り方を丁寧に解説しているPhotoshopのチュートリアル集
透明感のあるものやグランジ風・イラスト風など最近よく見かけるウェブサイトのデザインを一から丁寧に解説しているPhotoshopのチュートリアルを紹介します。
ウェブデザイナーとしてスキルアップするための20のメソッド
素晴らしいデザイナーは日々、自身のスキルを向上しています。 「もうここで十分です」と言って成功したデザイナーを誰も聞いたことがないでしょう。 ウェブデザイナーのスキルアップに役立つ20のメソッドを紹介します。 20 Methods for Upping Your Current Web Design Skills [ad#ad-2] 下記は各ポイントを簡潔に意訳したものです。 原文はそれぞれもう少し長いです。 ユーザーインターフェイスのデザインパターンのスタディ ウェブデザインのために最も良いUIをチェックし、研究してください。 ディテールに注意を払う 日常や他のウェブサイトのディテールを見て、自身のデザインにも多くを加える練習をしてください。 SEOのテクニック クライアントの多くはSEOサービスを提供するウェブデザイナーが好きです。 ウェブデザインのトレンドを知る ウェブトレンドは単に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用無料！ラノベ風にデザインされた元気でかわいい日本語のフリーフォント -ラノベPOP
商用利用無料、けいおん！っぽい元気でかわいい日本語のフリーフォント -けいふぉんと！（漢字も使えるよ）
[JS]エレメントとエレメントを繋いで自由に動かせるスクリプト -jsPlumb
ウェブデザイナーにお勧め！フォントやタイポグラフィの知識・テクニックを学ぶまとめ | コリス
漢字も使えて見出しやキャッチコピーにいい感じ、やさしいデザインのフリーフォント -ロゴたいぷゴシック
ロゴを作る時に知っておきたい11の基本ルール
2014年、無料で商用利用できる最新フリーアイコン素材のまとめ