ユーザーインターフェイスを母親にも分かりやすくデザインするために大切な6つのポイント
わたし達が知っている最も大切な人、母親にとって、ユーザインターフェイスを分かりやすく、有用にデザインするために大切な6つのポイントを紹介します。 彼女たちは、わたし達が何をしているか知らないことを数多く知っています。 Designing User Interfaces for My Mother written by Tony Gines(@tgines) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. 彼女は古いブラウザで見ている 2. 彼女はWebサイトのほとんどの機能を理解していない 3. 彼女はアイコンを理解していない 4. 彼女はパワーユーザーではない 5. 彼女はクリックの回数を気にしない 6. 彼女はしたいことだけをして、繋がりを感じることを望みます 終わりに 1. 彼女は古いブラウザで見ている 彼女が好むブ
[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ
スマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。レスポンシブデザインでよく使われているMedia Queries（メディアクエリ）の書き方、ブレイクポイントの最適な値など、制作に役立つリソースやツールを紹介します。 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 複数のブレイクポイントを使ったメディアクエリの書き方 人気のフレームワークのブレイクポイントの設定 レスポンシブの確認が簡単にできる最強ツール 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 スマホ、タブレット、ラップトップ、デスクトップごとのブレイクポイント、そしてiPhone, iPad, Nexusなど各デバイス用のブレイクポイントに合わせたメディアクエリの書き方がまとめられています。 Simple CSS Media Queries デバイ
![[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/7c5c596162907ccc099585ca47e2a595ce4e13c0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016091201.gif)
気になるWebデザインのアイデア・テクニックが使われてる！2016年になってでてきた5つのトレンド
Webデザインのトレンドは実際に使うかどうかは別にしても、それらを見るのは非常に楽しく、インスピレーションが刺激されます。 2016年上半期、最近見かけるようになったWebデザインの5つのトレンドを紹介します。 5 Actual Web Designs Trends for 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 1. ブラウザいっぱいに表示して、スクロール無し 2. 固定表示は見出しをサイドに 3. ロゴをローダーとして使う 4. 今までは違った背景の使い方 5. 圧倒させるアニメーション ボーナス 1. ブラウザいっぱいに表示して、スクロール無し スクロールを必要としないサイトが、ついに勢いを増してきました。 縦長ページで次々にコンテンツを無限スクロールで表示させたり、リンクが配置されたヘッダを上部に固定表示させ
CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress
ブラウザごとに異なる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」をカスタマイズしたもので、スタイルシートを始める時のしっかりしたベースな
Photoshop CC 2015.5の新機能は便利なのがいっぱい！正確な切り抜きや選択範囲を作成するのが簡単ですごい！
2016年6月20日に、AdobeのCreative Cloudがアップデートされました。バージョンは、2015.5と「.5」がついただけですが、前回の2015.1から、4つ飛ばしになり、新機能がかなり搭載されています。 Photoshop CC 2015.5の魅力的な新機能を紹介します。 誰もが恩恵を受けるのは「フォントリストの読み込みが4倍速」になったことでしょうか。これによりロード時間が圧倒的に早くなりました！ 地味ですが、こういうアップデートは非常に嬉しいですね。 Adobe Photoshop ※Adobeの画像の掲載にあたり、Adobeの広報様に許可を頂いています。 Photoshopで「カワイイ」「笑顔」「小顔」が簡単に作れる 「コンじる」が大幅にパワーアップ、新機能も登場 正確な選択範囲とマスクの切り抜き作成が簡単に、しかも速い 字形の機能が強化、フォントのスワッシュも簡単
UI/UXデザインツールの大本命、Adobe XDの私が大好きな便利な機能をすべて紹介します
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
ヴィンテージの無料素材のまとめ、時代ごとの使い方や特徴も解説
幾何学的な飾り、繊細なパターン、緻密なオブジェクトが美しいアール・デコ、アール・ヌーヴォーなど19世紀のヴィンテージ スタイルを中心に、その時代ごとのデザインの特徴と使い方を紹介します。 合わせて、個人・商用で無料・有料で利用できるデザイン素材・フォントもご紹介。 【更新: 2022/9/13】 元記事がアップデートされたので、合わせて当記事も更新しました。 Vintage Style Guide ヴィンテージ スタイルの手引き 唯美主義運動 -Aesthetic Movement アール・デコ -Art Deco アール・ヌーヴォー -Art Nouveau アーツ・アンド・クラフツ -Arts & Crafts バロック リバイバル -Baroque Revival 新古典主義 -Neoclassical ペンマンシップ -Penmanship ルネサンス リバイバル -Renaiss
レスポンシブと相性がいいカード型UIのレイアウトやデザインの実装アイデアのまとめ
Pinterestから人気が出始めたカード型UIは、ここ1, 2年の間に日本でも多くのWebサイトで見かけるようになりました。BootstrapやMaterial Designにも採用されており、レスポンシブデザインとも非常に相性がよいUIコンポーネントです。 そんなカード型UIのレイアウトやデザイン、アニメーションを伴ったインタラクションの実装アイデアを紹介します。 各リンク先ではHTMLやCSS、使用していればJavaScriptも編集・ダウンロードできます。 Recipe Card インタラクションの一部をアニメーションにしてみました。他にも写真がズームしたり、タブ（機能は未）などが用意されており、省スペースに多くの情報を掲載することができます。
Web制作者は絶対チェックしておきたい、デザインやコーディングに取り入れていきたい便利なツールのまとめ
Webサイトのデザインやコーディングは、やるべきタスクが年々増えてきました。それらの手間がかかる面倒な事が楽にできるツールやアプリも年々リリースされています。 これからのWeb制作にどんどん取り入れていきたいツールやアプリを紹介します。 Adobe Experience Design(Adobe XD) Adobe XDはWebサイトやスマホアプリのデザインやプロトタイプを作成するベクターベースのツールで、PhotoshopやIllustratorともスムーズに連携して利用することができます。 以前は「Project Comet」の名称で発表されていた新ツールが、2016年3月に「Adobe Experience Design(Adobe XD)」としてプレビュー版が公開されました。現在はOS X版のみですが、2016年後半にはWindows 10への対応も予定されています。
head内に記述する要素の総まとめ -meta要素、link要素、ソーシャルサービス用の要素、ブラウザやスマホアプリ用の要素など
HTMLドキュメントのhead内に記述するmeta要素やlink要素、ソーシャルサービス用の要素、ブラウザ用の要素、スマホアプリ用の要素などをまとめた「HEAD」を紹介します。 HEAD -GitHub 翻訳するにあたりいくつか尋ねたところ、著者様はとてもいい人でした。 公開当初から内容がアップデートされ、ライセンスもCC0に変更されています。 オススメの最小限の構成 要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 スマホアプリ関連のhead内の要素 メモ オススメの最小限の構成 下記は、head内に記述する最小限のタグです。
[CSS]否定疑似クラス「:not」の便利な使い方と使う時の注意点
例えばリストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんなスタイルシートも「:not」を使うと簡単に指定することができます。 否定疑似クラス「:not」の便利な使い方と使う時の注意点（特に優先順位）を紹介します。 On :not and Specificity 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「:not」の便利な使い方 CSSセレクタの優先順位 101 「:not」を含む優先順位 「:not」を使う時の注意点 まずは、「:not」の各ブラウザのサポート状況。 2016年現在、どの環境でも特に問題なく、利用できると思います。 :not などセレクタの各ブラウザのサポート状況 「:not」の便利な使い方 否定疑似クラス「:not」は使い
![[CSS]否定疑似クラス「:not」の便利な使い方と使う時の注意点](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7854364c5c81764331231720a32437f4c3a3926/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016032501.png)
ワンランク上のコーダーは万が一の配慮も欠かさない、リンク切れの画像要素をスタイルするテクニック
通常はお目にかかれませんが、リンク切れの画像があるのはいただけませんね。 画像がリンク切れだと、こんな風に表示されてしまいます。 もちろんリンク切れがないのがベストですが、絶対に存在しない訳ではありません。 よりよいユーザエクスペリエンスを提供するために、リンク切れの画像要素にスタイルを定義しておくことができます。 Styling Broken Images 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 img要素の2つのポイント リンク切れの画像要素のスタイル ブラウザのサポート状況 img要素の2つのポイント リンク切れの画像要素をどのようにスタイルすることができるか理解するために、最初に理解しておくべきimg要素の2つのポイントがあります。 img要素に通常の文字関連のスタイルを定義できます。 定義したスタイルは代替テキスト(
Photoshop CC2015を使いこなす定番テクニックから、あまり知られていない便利なテクニックまでのまとめ
Photoshop初心者も、普段使ってる人も知らないともったいないPhotoshop CC2015を使いこなす便利なテクニックを紹介します。 この記事を書くにあたって、WinとOS XのPhotoshop CC2015でそのテクニックを確認したのですが、けっこう知らないこともあり、かなり参考になりました！ 最後にはボーナスとして、全操作の動画もあります。 28 Awesome Tips and Tricks for Photoshop CC 2015 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ※各ショートカットは、OS X用です。 Windowsの場合は、下記のように置き換えて利用してください。 Command = Ctrl Option = Alt Delete = Backspace 01: 歯を自然な白さに美しくレタッチす
Flexboxでどういうレイアウトができ、各プロパティはどのように挙動するのかがよく分かる -Flexbox playground
2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。IE11を対象した際に、Flexboxの導入を考える制作者も多いと思います。 ※Vistaは2017年にサポート終了（参考: Windows製品のライフサイクル） Flexboxでどういうレイアウトができるのか、各プロパティはどのように挙動するのかが分かるFlexbox playgroundを紹介します。 Flexbox playground Flexbox playgroundはページの埋め込みにも対応しており、Flexboxのコンテナとアイテムの各プロパティがどのような挙動をするかよく分かると思います。 Flexboxの各プロパティの詳しい解説は、下記ページをご
2016年に備えてしっかり確認しておきたい、Webとグラフィックデザインのトレンドと今後の展望
Webデザインやグラフィックデザインのトレンドをしっかり知っておくことは、非常に大切です。廃れゆくものを採用するのではなく、今必要とされているものが何なのか、そしてなぜそれが必要とされているのか理解することで、よりよいものが制作できます。 Webとグラフィックデザインのトレンドとその背景、目的、展望などを紹介します。 16 Graphic Design Trends To Watch In 2016 各項目ごとのグラフィックも分かりやすく、注目です。 01. ユーザーが使いやすいこと 02. レスポンシブデザインの考え方 03. アプリを彷彿させるWebデザイン 04. ナビゲーションの進化 05. モジュール式のテキスト 06. モジュール式と無限スクロール 07. Material Design 08. フラットデザイン 09. 1,000の言葉よりもビジュアルで 10. インフォグラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインとコーディングの実務レベルの知識を基礎から独学で身につけることができるオススメの本
Photoshopで画像の切り抜き、選択範囲を作成するのはこれが一番簡単で正確！CC 2021で進化した選択範囲とマスクの作成
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
レスポンシブデザインに相性がいい、カード型コンポーネントの実装アイデアのまとめ
