個人でも商用でも完全に無料で利用できる、さまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ホワイトペーパー、ブラックペーパー、クラフトペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。 難点があるとすれば、ファイルサイズが大きいので、全部ダウンロードすると時間がかかるくらいでしょうか。 ResourceBoy ResourceBoyはテクスチャ素材をはじめ、ブラシ素材、グラデーション素材、モックアップ素材など、商用利用無料の数多くのリソースをダウンロードできます。1年くらい前にも紹介しましたが、その時からさらにテクスチャ素材の種類が増え、パワーアップしています。 ResourceBoy ライセンスは独自で、個人でも商用でも無料、ロイヤリティフリーとなっています。詳しくはダウン

商用でも無料、かわいくておしゃれなイラスト素材をまとめました。Webやアプリ、プレゼン、提案書、ポスター、同人誌など、さまざまなメディアで無料で利用できます。 ほぼすべてがクレジット表記は必要無しなので、使いやすいと思います。 イラストセンター 個人・商用プロジェクトで無料で利用できます。 現在10,000点以上、分かりやすくて使いやすいイラストが揃っています。カテゴリも豊富で、だいたいのものが揃っています。野菜や果物など、同じテイストでたくさんあるのもいいですね。料理もたくさんの種類があります。一度に利用できるイラストの数は20点までとなっており、詳しくは利用規約をご覧ください。

ノンデザイナーズ・デザインブック [第4版] 令和元年記念キャンペーン 今回のキャンペーンは、2本立てです。 ノンデザイナーズ・ デザインブックの動画化 20周年の特典PDFを数量限定でプレゼント ノンデザイナーズ・ デザインブックの動画化 ノンデザイナーズ・デザインブックの動画では、デザインの基本4原則とその応用テクニックを分かりやすく解説。 第1回目の動画は、「名刺」です。 第1回目は基本編として、名刺の制作を通して基本4原則をおさらいできます。また、第2回目は活用編として、書籍では解説されていない、ビジネスドキュメントやプレゼン資料に使われることが多い「表組み」が予定されています。 第2回以降を視聴するには、手続きが必要です。 ノンデザイナーズ・ デザインブックを所有している人のみ対象（紙書籍・電子書籍問わず） マイナビの下記ツイートをシェア。 マイナビのフォームから申し込み。 マイ

Windowsユーザーの方に朗報です！ Windows 7, 8, 10で、Sketchのファイルを開くことができ、編集も保存もでき、CSSの書き出し、SVGやPNGのエクスポートもできてしまう無料アプリが登場しました。 もちろん、日本語のWindows環境でも利用できます。 Lunacy, Sketch for Windows 前回紹介した時はファイルを開くだけの機能でしたが、ついに編集・保存にも対応し、Sketchの機能の80%を備えました！ Windows版のSketchといっても過言ではないでしょう。 Lunacyの特徴 Lunacyのダウンロード・インストール Lunacyの使い方 Lunacyの特徴 Lunacyは、.sketchファイルを開き、編集し、保存することができるWindowsのネイティブアプリです。しかも、完全無料で利用できます。 Lunacyの画面 Sketch（

ここ数年の間に、スマホは単なる電話以上に多くの機能を持つようになりました。スマホはさまざまな目的のために使用され、わたし達の日常のアシスタントをこなしています。 そんな便利なスマホアプリのユーザーインターフェイスに注目し、最近のUXデザインにおけるクリエイティブなすごいコンセプトを紹介します。 15 Creative UX Design Concepts for Everyday Needs by Tubik Studio 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 植物の水やりを管理するアプリ 安眠アプリ ハンバーガーショップのアプリ TODOアプリ 料理のレシピアプリ ベジタリアン用のレシピアプリ アラームアプリ 家電操作アプリ 家計簿アプリ 名刺管理アプリ バランスアプリ ファイナンスアプリ フィットネスアプリ カレン

先日ローンチされたばかりの素敵な写真素材サイトを紹介します。 デザインに使いやすい写真ばかりが揃っており、人物やオブジェクトの背景がベタで、非常に使いやすい写真素材です。スナップ写真のようなものは一切なく、センスがいい写真が無料でダウンロードできます。 Moose 写真はすべて標準のライトで撮影されており、オブジェクトやモデルや背景を自由に組み合わせることができます。 上記のページでモデルと背景を変更しても、違和感はありません。 まずは、写真のダウンロード方法から。 各写真ページの「Download Photo」をクリックするだけで、高解像度の写真がダウンロードできます。登録やメールアドレスなどは必要ありません。 Good Breakfast, Great Day 各写真ページから高解像度のものがダウンロードできますが、すべての写真を一括でダウンロードすることもできます。トップページの「D

普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ

結果ページ どのリンクをいつクリックしたのか、いつホバーしたのか、指定エリアでどのくらいマウスを動かしたのか、フォームに特定の文言を入力したのか、チェックボックスをクリックしたのか、ブラウザは何か、解像度はいくつか、ディスプレイの向きはどっちなのか、などの情報が表示されました。 ※出力する際には、PHPが使用されています。 Crooked Style Sheetsの仕組み Crooked Style Sheetsは、外部CSS一つを加えるだけで、Webページのユーザーに関するさまざまな情報を取得できます。 基本的な仕組み CSSではurl()関数を使用して、外部リソースを追加できます。url()関数の値は呼び出された時のみロードされるため、これをリンクがクリックされた時に利用します。 リンクを記述するHTMLは、要素を特定できるようにidを与えます。

WordPressのローカル環境を構築するといえば、XAMPPやInstant WordPressを利用している人が多いと思いますが、これらより簡単に、そして一度のインストールで複数の環境を構築でき、PHPなどのバージョンも簡単に変更することができる高性能な無料ツールを紹介します。 サーバーの知識がない人でも簡単に利用でき、あっという間にWordPressのローカル環境が構築できます。 UIも洗練されて使いやすく、かなりオススメです！ ローカルに、WordPressの制作環境を簡単に構築できます。 WordPressの制作環境は、複数構築できます。 サーバーの知識がない人でも、4クリックするだけでOK。 WordPress日本語版にも対応。 ローカルSSLサポート。 SSH/WP-CLIアクセス。 共有可能なURLを作成して、クライアントに見せることも可能。 柔軟な環境オプション。 PHP

5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 What's New In DevTools (Chrome 59) Chrome 59 - What's New in DevTools -YouTube ページの軽量化: 未使用のCSSとJavaScriptを見つける フルサイズのスクリーンショットをキャプチャ リソースのロードをブロック 非同期コードの検証 コマンドメニューの統一 ページの軽量化: 未使用のCSSとJavaScriptを見つける 新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。 command + shift + P で、「Show Coverage」を入力して選択。 ※「cov」まで入力すれば、上位に表示されます。 Show

Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を

先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (

毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ