最近のスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利ですね。 Mobbin 150種類以上のiOSアプリ、8,000パターンのUIがまとめられたギャラリー。一つのアプリで、さまざまなUIが収録されているので、非常に便利です。スクリーンはiPhone X対応で、気に入ったアイデアは保存することもできます(要サインアップ)。
当ブログでもたくさんの無料アイコンを紹介してきましたが、自分にぴったりのアイコンを探すのはかなり大変だと思います。85,000個以上の高品質なアイコン素材を自由にカスタマイズしてダウンロードできる新しいIcons8を紹介します。 下記のようにカラー変更は当たり前、要素を加えたり、文字入れしたり、さまざまなカスタマイズに対応しています。SVGも完備されているので、重宝しますね。 Icons8 beta Icons8の使い方 無料で利用できるアイコンはなんと、85,000個以上 Icons8の使い方 Icons8の使い方は、簡単です。 さまざまな機能が用意されていますが、直観的にすべてを利用できると思います。 アイコンの選択から、カスタマイズ、ダウンロードまでざっと説明します。
少人数で一回限りのプロジェクトであれば、カラーシステムは割と簡単に構築できます。しかし、大人数や長期間のプロジェクトになると、そう簡単ではありません。 Webサイトやスマホアプリで、長期的に使用でき、拡張性があり、アクセシブルなUI用のカラーシステムを構築する新しい方法を紹介します。 Re-approaching Color 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに カラーの名前の付け方 カラーの選択方法 カラーのアクセシビリティ はじめに カラーとは世界を認識するのに役立ち、そしてインターフェイスにとっても重要な存在です。わたし達が予測して、そして理解し、意思決定するのをカラーは導きます。 例えば、レッドの文字は注目し、グリーンの数字はリラックスし、グレーの文章の前にブラックの文章を読むでしょう。ブルーの文字は
Vue.jsで、何ができるのか? Vue.jsでUIを構築する際の考え方、導入方法、基本的な使い方、コンポーネントの扱い方、そして、実際のアプリケーション開発やjQueryからの移行など、この一冊でVue.jsの基礎から実践的な使い方までがしっかりと身につくオススメの本を紹介します。 Web制作に携わる人であれば、読むとワクワクすると思います。 本書はVue.jsのコアチームに名前を連ねている川口氏や片山氏をはじめとする、Vue.jsのエキスパートによる入門書ながら本格的な解説書。 Vue.jsに興味がある、使ってみたい、もっと使いこなしたい、そんなフロントエンドの制作に携わるコーダーやデザイナーにぴったりです。
UIのデザイナーをはじめ、デザイナーではない人でも、どのようにデザインのセンスを磨き、デザインを見る目をどのように養えばよいのかを紹介します。 How to develop an eye for Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザインのセンスを磨き、デザインを見る目を養う アプリは使うだけではなく、そこから何を学ぶか 実際のアプリを分析 ルールが分かれば、壊すこともできる デザインのセンスを磨き、デザインを見る目を養う 私はデザインを始めた時、デザインが苦手でした。 Dribbbleなどからトレンドのデザインをコピーするのに夢中で、それらがどのように機能するのか気がついていませんでした。私が加えたドロップシャドウや不必要なエフェクトをもしあなたが見たら、ぞっとすると思います。 私はデザインの天才で
WebサイトやスマホアプリにぴったりなSVGアイコンを簡単に使用できるよう構築されたJavaScriptの軽量ライブラリを紹介します。 カスタマイズも非常に簡単で、HTMLのdata属性を使用して、SVGアイコンのサイズやカラーを個別に設定できます。 90種類以上のSVGアイコンが全部商用利用無料 vivid.jsでは現在90種類以上のアイコンが利用できます。 手作業で追加するのも可能で、リクエストも受け付けています。 超軽量ライブラリ オリジナルのSVGアイコンのちょうど半分のサイズで実装された超軽量ライブラリ。他のCSSやJavaScriptなどの依存は無しです。 SVGアイコンは使用もカスタマイズも簡単 アイコンはHTMLで簡単に使用でき、サイズやカラーはdata属性でカスタマイズできます。 MITライセンス 個人でも商用でも無料で利用できます。
先週末にリリースされたChrome 67でアップデートされたデベロッパーツールの新機能を紹介します。 Webの制作時に役立つ機能だけでなく、UIも進化しており、さらに便利になりました。 What's New In DevTools (Chrome 67) ネットワーク ヘッダとレスポンスを検索 CSS変数値のプレビュー機能 Copy as fetch Auditsパネルのアップデート 無限ループを停止する ダークテーマのアップデート ネットワーク ヘッダとレスポンスを検索 Networkパネルに検索機能が加わり、クエリのすべてのネットワークヘッダとレスポンスを検索できます。検索するキーワードは、正規表現にも対応しています。 Networkパネルを開き、command + F で検索。 「cache-control」を検索 SearchパネルUIのアップデート グローバル検索のUIが、ネット
チーズはハンバーガーのどこに置くべきでしょうか? AppleとGooleのハンバーガーの絵文字はTwitterでかなり話題になっていました。各社のハンバーガーや味といった観点からではなく、デザイン面からこの違いを解説した記事を紹介します。 Hamburger Emoji (🍔) War: Why Is Apple Right 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2つのハンバーガーの絵文字 Twitterで「Appleはパティ(肉)の上にチーズがあるのに、Goolgeはなぜパティの下にチーズがあるのか」と指摘され、GoogleのCEO、Sundar Pichai氏は、「我々のを取り下げる」とツイートしました。 Sundar Pichai氏のツイート この件はThe Vergeで最初に見かけました。そこではこの2つの
ひらがな・カタカナ・漢字が使える最近リリースされたものを中心に、日本語のフリーフォントを紹介します。 年賀状などに使える手書き文字、冬コミ用のデザインフォント、仕事にも使える読みやすいフォントなど、たくさん揃っています。 フォント紹介の前に各フォント制作者からのお願いごと。 フォントを利用の際には、利用条件やライセンスを必ず確認して守ってください。 最新版を公開!フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ 東青梅ゴシック / 東青梅ゴシック C 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 梅PゴシックとM+ OUTLINE FONTSをベースに、よく使われる漢字の字形をより統一したフォント。伝統的な形を受け継ぎつつ、モダンゴシックとの折衷をはかり、視認性が重視されたデザインです。 字画が多くても、読みやすいですね。 廻想体
先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。
英語で質問をする時、アドバイスを求める時、感謝や謝罪を伝える時をはじめ、その作業は後回しになるよ、電話じゃなくてメールで連絡してなど、Web制作やブログ運営時によく使いそうな英語メールをコピペで利用できる定型文を紹介します。 Canned Emails 上記ページの各テキストをクリックすると、メーラーが開き、定型文が入った状態で利用できます。定型文には、Web制作やブログ運営時でよくあるシーンで利用するものばかりです。 用意されている英語の定型文は下記の通り。 ※リンク先は、定型文のテキストファイルです。 apologize for problem / bug バグや問題を報告してくれてありがとうメール apply for position 仕事ができるやつだとアピールできるメール ask a question 質問がありますメール break up with someone もう一緒にや
最近のWebのUIはフラットデザイン・Material Designが着実に進化し、シンプルでコンテンツにフォーカスされたデザインが定着してきました。テキストは読みやすく、写真はより大きく使用されています。レイアウトは縦長型やカード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインが主流となっています。 最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材やプレビューを紹介します。 Boring Cards UI Kit PSD、個人・商用利用無料。 Bootstrap 4でも新しいコンポーネントとして注目されているカードを使用したUIキット。黄金比をベースにしたデザインはさまざまなサイズ・カラーで展開することができます。
各企業から出題された商品やサービスのプロモーションに関する課題に対して、応募者からその解決アイデアを企画書形式で募集する販促会議の企画コンペティションで、受賞作品が決定したので紹介します。 photo: stokpic 販促会議企画コンペティションの各受賞作品は、『販促会議』11月号(Amazon)に掲載されおり、受賞作品とファイナリストの中から特に面白いと思った企画・アイデアをいくつか紹介します。 雑誌には受賞作品の全スライド、応募者・審査員のコメントなども掲載されています。 販促会議企画コンペティション ※以下、各企画の敬称は略させていただきます。 グランプリ: 本命酒 課題 養命酒製造 / 40代のお母さん層が「薬用養命酒」を試してみたくなる企画 応募者 西岡和也、時井統子、松本卓也、畠山侑子、川波朋子、原田信宏、柴田悠香、井町雅一 Spc2015 53 from Kaigi Sen
個人でも商用でも、クライアントのプロジェクトでも無料で利用できる高品質な写真素材がダウンロードできるストックフォトサイトを紹介します。 27個のサイト、すべてクレジット表記やバックリンクの必要がないので、非常に利用しやすいと思います。
Photoshopは標準機能だけでも便利なツールですが、もっともっと便利になる機能拡張やアクションを紹介します。 定番として入れておきたいものから、特別な使用シーンに使うものまで、優れ物ばかりです。 Photoshopでのガイド引きに欠かせない強力な機能拡張 定番のGuideGuideは3.1.2にバージョンアップ 幅の異なる複数のガイドを一気に作成できる優れ物 Photoshopのスウォッチをフォルダで管理 カラーピッカーを開かずにカラーのコードを簡単コピー 複数のさまざまなオブジェクトのカラーを一元管理 手元の画像からシームレスなテクスチャを1クリックで作成 ビットマップのオブジェクトをベクターに変換 画像にパースをつけてかっこよく見せる パラグラフのレイアウトを段組みに変更 要素のサイズやエフェクトやフォントなどの情報を書き出す エレメントやマージンのサイズを書き出してくれる 黄金比
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く