最近のスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利ですね。 Mobbin 150種類以上のiOSアプリ、8,000パターンのUIがまとめられたギャラリー。一つのアプリで、さまざまなUIが収録されているので、非常に便利です。スクリーンはiPhone X対応で、気に入ったアイデアは保存することもできます(要サインアップ)。
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketchでの下準備 Zeplin ソフトウェア版 for OS X Zeplin ブラウザ版 for OSX, Win, Linux Zeplinのインストール Zeplinの特徴 Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア(無料)とオンラインサービス(無料と有料)です。 無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
文字の扱い方、レイアウト、カラー、エフェクトなど、プロのデザイナーがこだわっているデザインの基本となるルールと、ついやってしまう間違いとその解決方法まで、ワンランク上のデザイナーになるためにひとつ一つをしっかり見直したい20のデザインテクニックを紹介します。 カーニングとはフォントの文字間のスペースを調整することです。カーニングの最終目的は、それぞれの文字の間が不自然な空白にならないように字面間のスペースを均等にし、テキストを美しく整然とした一つのまとまりにデザインします。 カーニングがされていない、カーニングがいいかげんな仕事は、デザインの世界において大罪の一つです。カーニングはデザイナーが早い段階で身につけるべき重要なスキルです。 20 Typography Mistakes Every Beginner Makes 基本的だけど大切なタイポグラフィのシンプルな14のルール リーダビリ
BootstrapやFoundationなど人気のフレームワーク、CSSの各フレームワークの比較、WordPressのテーマ作成やコピペで利用できるコード集、Gitのコマンドやフロー、iOS/Androidのグラフィックガイドライン、ChromeのデベロッパーツールやSublimeTextやEmmetなど、Web制作に役立つ便利なチートシートを紹介します。 紹介している主なチートシート Bootstrap 3, Foundation 5のチーシート CSSの各フレームワークの比較 WordPressのチートシート iOS, Androidのデザイン用のチートシート jQueryのチートシート HTML5, CSS3のチートシート ファビコンのチートシート 検索エンジン最適化2015年版のチートシート Chromeのデベロッパーツールのチートシート SublimeText, Emmetのチー
正確な美しいプロ仕様のストロークで描ける、デザイナー・イラストレーター・アーティスト・絵師さん向けのIllustrator用のブラシ素材を紹介します。 通常は有料ですが今週末まで無料なので、ダウンロードはお早めに! Illustratorにブラシをインストールする方法 ダウンロードしたファイルをIllustratorで利用する方法は簡単です。 ダウンロードしたファイルを解凍します。 「ProBrushUpdated.ai」をアプリフォルダ内の「ブラシ」に移動します。 \アプリケーション\Illustrator CC 2014\Presets\ja_JP\ブラシ\ Illustratorを再起動します。 あとは、Illustratorのブラシパネルから、「ProBrushUpdated」を選択します。
最近のWebデザインに、ベクターデータの存在は欠かせないものになってきました。 アイコンやロゴなどをSVGで使用したり、Webページやアプリのデザイン・UI設計といった制作のワークフローをベクターで作業している人も増えてきました。 今までPhotoshopでデザインをしていた人には、IllustratorやSketchを使うとそんな事もできるのか! と目からウロコかもしれません。 IllustratorのWebデザインならではの使い方、Sketchの詳しい使い方を知りたい、SVGの効果的な使い方をマスターしたい、そんなWeb制作者に絶対オススメの一冊を紹介します。 IllustratorやSketchで扱うベクターデータには、マルチデバイス対応のWebデザイン・実装にとって大きなメリットがたくさんあります。
ヘッダ、フッタ、ナビゲーション、見出しなど、Webページでよく使う各コンポーネントやエレメントごとに国内・海外の素晴らしいデザインを集めているギャラリーサイトを紹介します。 眺めているだけで、さまざまなインスピレーションをもらうことができます! ヘッダのデザイン フッタのデザイン ナビゲーションのデザイン 見出しのデザイン いろいろなパーツのデザイン ヘッダのデザイン
Webサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなったり、Chromeで使えるけど他で使えないなどあるので、ブックマークレットもなかなか重宝します。 ページにグリッドを表示した確認 レスポンシブWebデザインの確認 デザインの確認をピクセル単位でできる ページで使用しているフォントをチェック ページをワイヤーフレーム化 ページの構造が正しいか確認 マークアップのいまいちな箇所を指摘してくれる 背景を素敵なテクスチャに変えてみたい ページのパフォーマンスを確認 minifyされたCSSを見やすく表示 SEOやソーシャルメディアに大切な項目を確認 コードとアクセシビリティをチェック ページにグリッドを表示した確認
WordPressには数多くのテーマファイルがありますが、それらとは少し違ったアプローチのテーマ「Layers」を紹介します。 ページ作成にはHTML/CSSの知識は不要で、レイアウトやウィジェットを組み合わせてかっこいいページを直感的に作成できます。 Layers Layers -GitHub ライセンスはGPL 2.0 Licenseで、商用利用、修正、配布などが無料で行えます。 通常のテーマファイルはデザインが完成していて、画像やテキストを配置しますが、Layersはベースとなるレイアウトが数種類あり、そこにコンポーネントやウィジェットを自由に組み合わせてページを作成します。 ページのデザインを見ながらカスタマイズできるテーマという感じです。 組み合わせるのは簡単で、下記ページで動画で公開されています。
トレンドをうまく取り入れ、デザインの細部まで徹底的にこだわり、気持ちのいいインタラクションとアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。 時間のある時に、じっくり楽しんでください!
ブログやWebサイトのパフォーマンスの改善やSEO、セキュリティの向上に役立つ.htaccessの設定を紹介します。 ドメインをwww有り・無しに統一、新ドメインに引っ越した時のリダイレクト、URLをクリーンなものにしたり、共有サーバーでのPHPのバージョンを指定したりなど、すぐに利用できるものばかりです。 .htaccess Snippets -GitHub 元記事には有用な.htaccessのスニペットがPublic Domainでまとめられおり、それら全部に加えて.htaccessファイルの作成と使い方を加えました。 .htaccessファイルの作成と使い方 リライトとリダイレクトの設定 セキュリティの設定 パフォーマンスの設定 その他のいろいろ有用な設定 .htaccessファイルの作成と使い方 「.htaccess」ファイルを作成することは非常に簡単です。 テキストベースのアプリ
数多くのブログで2015年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目すべきキーワードは、Material Designの本格始動、マイクロデザイン、スクロールコンテンツ、スマフォ・タブレットユーザーの更なる増加、そしてHTML/CSSのフレームワークの陰り。 写真:re:splashed 2015年、現在のWebデザインを確認しながらこれからのトレンドを探る 2015年、Web制作業界全体の流れ 2015年にあなたが目にするWebデザインのトレンド 2015年に大きく変化するウェブデザインの10の傾向 2014年のトレンドで良かったもの、ダメだったもの モバイルデザインに向けたWebデザインの7つの戦略 2015年、IT系で求められているスキル 2015年、現在のWebデザインを確認しながらこれからのトレンドを探る
Webデザインでパステルカラーを使うのは最近のトレンド、またはそれ以上といってもよいでしょう。魅力的なビジュアルを作るために、デザイナーがマスターしておきたいパステルカラーの効果的な使い方を紹介します。 「パステル」と聞くと、淡いピンクやイエローを思い浮かべる人が多いかもしれません。ここで紹介するパステルにはもっと多くのカラーがあります。 Solasie パステル調の写真やパステルをオーバーレイさせた写真をWebページに使うと、繊細で素晴らしいキャンバスになります。写真のトーンを少し控えめにすることで、要素を配置してもしっくりきます。ロゴやボタンなどの要素とコントラストを使って配置するのもよいでしょう。 「Solasie」のロゴはパステルトーンの写真とうまくフィットしています。このやり方はソリッドなラインでデザインされたゴーストボタンにも使えます。 パステルの背景 Dear Mum パステ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く