これはすごい便利！ WebサイトやスマホアプリのUIに今時のアニメーションやインタラクションを簡単に実装できる -Animata
WebサイトやスマホアプリのUIにアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードをまとめたAnimataを紹介します。 112種類のアニメーション化されたUIコンポーネントが揃っており、見ているだけでもインスピレーションが刺激されます。 Animata Animata -GitHub Animataの特徴 Animata化されたUIコンポーネント animataの使い方 Animataの特徴 Animataは、WebサイトやスマホアプリのUIに使用されるアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードを提供しています。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。 AnimataはUIライブラリではありません。UIに動きを与えるためのコード集なので、他のUIライブラリやデザインシステムと一緒に使用できます。カ
ユニクロ公式サイトが使えません（ついでにレジも）｜ブラインドライターズ
ブラインドライターズのスタッフは9割が視覚障害者。 先日、みんなで「どうやって服を買うか」の話になりました。 マネキンの服は見えないので、コーディネートが分からない 下着を買いたいけど、店員さんの性別が分からないので声をかけづらい ロービジョンなので黒なのか紺なのかわかりにくく、店で買いづらい などと、たくさんの悩みごとがありました。 確かに、異性の店員さんに下着の相談はしにくいですよね。 タグが読めなければ、サイズも分からない。リアルでの買い物は一人ではけっこう難しそうです。 そんなときに便利なのがECサイトです。 色もデジタル表記になっていればPCが読み上げてくれるので選びやすい 下着も人に頼まなくていいので買いやすい マネキンのコーディネートは見えないので、サイトで確認したい また「リピ買いするならサイト」という意見もありました。確かに見えていないと広い店内のどこにあるのかサッパリ分
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
CSS Stock｜Web制作を楽にするCSSコピペサイト
HTML・CSSの知識は不要。全222種類のパーツから お好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。 掲載しているコードについて 当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。 ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。 また掲載している
Ukiyoe Stock | 5,100以上の和風・浮世絵素材サイト。無料・商用フリー・クレジット不要
より詳しい素材検索はこちら ↓複数条件検索できます。（文字を入力するよりもプルダウンから選択するほうがヒットしやすいです。）
chot.design - 毎日ちょっとずつデザインを学ぼう
毎日ちょっとずつ、デザインを学ぼう毎日ちょっとずつデザインを学ぼうIT/Web業界のデザイン学習サイト
SuuHaa（スーハー）| 長野県の移住総合WEBメディア
長野の空気を深く吸い込もう ＳｕｕＨａａは長野に根を張って生きる人たちや 地域の営みから生まれる豊かな空気を伝える 長野県の移住総合Ｗｅｂメディア。 暮らす場所や働き方を変えたいなと思ったとき この空気を深く吸い込んで視界が変わったら…… そんなことを考えています。 自分らしい暮らし方・働き方に出会う 窓口として 新鮮な空気を送り届けていきます。
Web制作の時短に！2020年の便利オンラインツール・ベスト100選
この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（14個） 2. パターンツール（7個） 3. イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7. SVGツール（8個） 8. スクリーンショ
Web制作者がチェックしておきたい、最近のWebサイトで見かけるデザインのアイデア -2018年5,6月
デザインで悩んだ時には、新鮮なアイデアに触れてみると良いインスピレーションに繋がります。最近のWebサイトで見かけるデザインのアイデアを紹介します。 今まで使用されてたデザインのトレンドにも一手間加えられて、より使いやすく、洗練されたものになっています。 3 Essential Design Trends, May 2018 3 Essential Design Trends, June 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スクリーンいっぱいの写真画像 分割スクリーンの新しい考え方 透明度を抑えたカラーオーバーレイ ナビゲーションの小型化 注意を引き付けるカットアウトとレイヤー 早回しの動画 スクリーンいっぱいの写真画像 ヒーローイメージは、スクリーンいっぱいの写真画像でさらに大きくなっています。新しい重要
デザインやイラストの質感アップに効果あり！無料でダウンロードできるPhotoshopのブラシのまとめ
人物の肌や髪に質感を与えたり、水彩や油絵やペン画のようなタッチに仕上げたり、レース柄や水滴などがさっと描けたり、マンガで使うスクリーントーンなど、イラストやお絵描きやデジタルアートなどに無料で使えるPhotoshopのブラシを紹介します。 最後に増えてしまったブラシを管理する無料のブラシ素材もご紹介。ブラシを管理するブラシ素材ってなんぞ？ って思うかもしれませんが、文字通りの素材です。
【2018年春】今チェックしておきたいデザインツール12選
JakeはUIデザインやWeb開発の記事を執筆するライターです。彼の仕事はあらゆるWebや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 デザイン業界の流れは速く、絶えず新しいツールが誕生しています。そのため、デザイナーとして最先端を走り続けるには、世の中の動向につねに注意する必要があります。 そこで今回は2018年現在、チェックしておきたいデザインツールを厳選してまとめました。これらのツールにはデスクトップのプログラムもありますし、SaaSのアプリやブラウザツールもあります。 いずれにせよ、このリストにはみなさんがチェックしたいと思うものが必ずあるはずです。詰まるところ、素晴らしいデジタルコンテンツを作ることにおいて、あなたのデザインスキルはさまざまな手段の一部に過ぎないのです。 Adobe XD Adob
「レスポンシブ」デザインを前提としたWebサイト制作【基礎編】
「レスポンシブ」Webデザインは、スマホサイト必須化の流れの中で、より効率的にWebサイトの制作・運用ができる、と期待されている技術です。 「レスポンシブ」に厳密な定義があるわけではありませんが、「レスポンシブ」という言葉を有名にしたGoogleのデベロッパー向けコラム（https://developers.google.com/webmasters/smartphone-sites/details?hl=ja）によると、同一のHTMLがすべてのデバイスに配信され、CSSによってデバイスでどのようにページをレンダリングするかが決まります。 という構造を持つページを「レスポンシブ」と呼んでいます。スタイルシート（CSSファイル）がデバイスの違いを吸収して、ブラウザ上の見栄えをコントロールする代わりに、htmlデータはPCもスマホも同一のものを使うことで、運用上の負荷が減ることになります。 で
レスポンシブWebデザインチェックツール | LIQUID DESIGN
スマートフォン、タブレットなど様々な画面サイズのレスポンシブ表示確認が簡単にできるチェックツールです。拡大縮小や縦横回転も自由自在。
Webデザイナーのキャリアを考える【制作会社と事業会社の違い】
Webデザイナーの求人・案件でよく目にするのが、Web制作会社と自社サービスを運営する事業会社。Web制作会社の求人・案件には、仕事内容のところに「大手サイト、有名企業Webサイトの制作」「受託」といったキーワードが、自社サービス会社の求人・案件には「自社ブランドサイト」「自社サイト」といったキーワードが多く見られます。 それぞれのビジネスモデルでは、仕事内容や必要なスキル、職場環境など具体的にどのような違いがあるのでしょうか？現役Webデザイナーたちの声をもとに、探ってみました。 ＜この記事に関連する記事＞ フリーランスのWebデザイナーになるには？【必要な準備や仕事の始め方を解説】 フリーランスWebデザイナー仕事の取り方【エージェント利用はおすすめ？】 【Webデザイナー向け】後悔しない会社の選び方！未経験必見 目次 制作会社と事業会社における仕事内容の違い Webデザイナーが制作会
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
jQueryプラグイン「Waypoints」でスクロール中に要素が出現するサイトを作ろう！ | Neganin(ネガニン)
2. ダウンロード 「jQuery」本体はダウンロードするか、Googleにホストされているファイルを読み込みましょう。 「Waypoints」のバージョンは3.1.1です。下記サイトからダウンロードし「lib」フォルダ内の「jquery.waypoints.min.js」を使用します。 jQuery Waypoints <header id="header"> <h1>Waypoints</h1> </header> <p id="text">jQuery Waypoints Demo</p> <div id="content"> <div id="wrapper"> <section class="section"> <figure class="thumb"><img src="img/thumb1.jpg"></figure> <h2>Title</h2> <p>Text Text
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webアイデアの救世主、真似したくなる最新デザイン36選
MingCute Icon _ Carefully Designed Icon Library
ためしがき
Icons | Font Awesome
