先日ローンチされたばかり、500種類以上のランディングページのデザインをまとめたLandingsを紹介します。 ランディングページのデザインは、テーマやカラーでフィルタリングができ、アイデアを膨らませるのに役立つと思います。 Landings Landingsは今月の初めにローンチされたばかりのランディングページのまとめサイトです。現在のところ、500種類以上のランディングページのデザインがまとめられており、これからも定期的に追加していくとのことです。 Landings Landingsの利用は簡単で、登録など面倒なことは一切不要。 ページは無限スクロールに対応しているので、そのままスクロールしてもよし、上部でテーマやカラーでフィルタリングすることもできます。 フィルタリングを見てましょう、まずはライトテーマ。 各サムネイルをクリックすると、ページ全体のキャプチャ画像とランディングページの

コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、？となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない（複数呼び名がある）ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ

WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif

「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を

コードやテンプレートに縛られずに、 誰でも自由自在にデザイン可能。 作成したサイトは、1クリックで世界に公開。 そう、必要なのはSTUDIOだけです。

Google HTML/CSS Style Guide（2019年9月時点） より意訳とまとめ。訳が間違っていたらごめんなさい。 プロトコル imageやmedia、scriptなどを指定するときに、可能な限りhttpsを利用する。 <!-- 非推奨：プロトコルの省略 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 非推奨：httpの利用 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 推奨 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery

テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ

普段お世話になっているwebツール達の紹介です。 以下のサイトはすべて 無料 & 登録不要 です。 正規表現 regexper 正規表現を可視化してくれます。 複雑な正規表現を書くときやコードリーディングのお供に重宝します。 Rubular Rubyの正規表現をテストできます。 JSON JSON FORMATTER & VALIDATOR JSON系のツールが集まったサイト。 それぞれ、サイト名とドメインが違うのでリンクはそのうちの１つになっています。 (画像クリックでそれぞれのツールに飛べます。) ひとつずつ紹介します。 JSONをフォーマットしてくれます。 出力結果は折りたたむことができるので、長いJSONを読むときにも便利です。 JSONを含めた様々なデータ形式を変換できます。 Inputの以下に対応。 CSV INI JSON XML YAML Outputは以下に対応。 JSO

Webサイトやアプリにおけるアクセシビリティについて学んでみたい、そして身につけたい、と考えている人は多いと思います。 「WAI-ARIA」「Web標準」「セマンティック」など、アクセシビリティに関する用語の解説レベルだけでなく、実務ですぐに使える具体的な方法も数多く掲載されたオススメの本を紹介します。 アクセシビリティってこういうことだったんだ！と分かる一冊です。 本書はSmashing Magazineのアクセシビリティ担当：ヘイドン・ピカリング著「Apps For All(2014)」の訳書で、翻訳はBAの太田さんと伊原さんが監修したものです。 BAの二人は、元同僚。 僕が知る中ではアクセシビリティといえば太田さん、太田さんの存在自体がアクセシブルと言ってもいいかもしれません。 そんな造詣が深い太田さんと伊原さん二人の監訳は訳書にありがちなぎこちない日本語ではなく、制作現場の生きた言

ざらっとした紙、ふわっとした布、シックな壁紙、コルク、岩など、シームレスに利用できるパターン素材とテクスチャ素材を紹介します。 Subtle Tile Patterns Vol7 ダウンロードできる素材のフォーマットは2種類。 .png（すぐ使う用） .pat（Photoshopのパターン素材） パターンは全部で8種類、ホワイト系からブラック系まで揃っています。

一つのカラーを元にそれにあったカラーパレットやグラデーションを作成したり、トレンドカラーを使った配色サンプル、アクセシビリティガイドラインに沿ったカラーパレットなど、配色設計に役立つオンラインツールを紹介します。 Coolors オススメの組み合わせを次々に表示してくれるオンラインサービス。 スペースキーor右のアイコンでランダムカラー、ロックでカラー固定、さまざまなファイル形式にエクスポートもできます。

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

今まではIE6の存在等もあってCSSだけでプルダウンメニューを作るのはほぼ不可能でしたが、CSSがより多くのブラウザでしっかりと反映されるようになってきたので、CSSだけでプルダウンメニューを書くことができるようになりました。 今回は、その手順を解説していこうと思います。 ＜続きはこちら＞ コメント一覧 (2) 1. 紫水ルリ 2014年08月07日 19:32 はじめまして、 今まで使っていたメニューバーに ドロップダウンをつけることができました。 ありがとうございました。 いろいろ試してみたのですが、 この方法が１番よくわかりました。 ちゃんとドロップダウンになりました。 ブログに記事を作りたいので、 このページをリンクさせてください。 よろしくおねがいします。 2. のりさ 2014年08月07日 22:58 > 紫水ルリさん 了解です。 むしろ、よろしくお願いします。

では、HTMLから解説していきます。 HTML <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メ

こんにちは。デザイナーの白浜です。 人が見て美しいとデザインとされる黄金比や白銀比。なんとなく知っているものの、作り方や使い方がよくわからないという人もいますよね。 今回は黄金比や白銀比の考え方についてわかりやすく解説するとともに、Webデザインのレイアウトや画像制作に黄金比や白銀比を取り入れる方法・お役立ちツールをご紹介します。 良かったら参考にしてみてください。 （編集部注：2013年12月16日に公開された記事を再編集したものです。） 黄金比・白銀比って？ 黄金比・白銀比は、古くからある人が見て美しいと言われる調和的な比率のこと。デザインに黄金比や白銀比を使用することで、言葉で言い表せない芸術的な美しさを加えることができます。 まずは黄金比・白銀比がどういうものなのか、基本の考え方についてみていきましょう。 黄金比の比率と作り方 コトバンクによると、黄金比(Golden ratio)

ふぅ、あとはここにドロップシャドウをONと…。てな感じで安易にドロップシャドウかけてやしませんか？ 使い勝手の良すぎるドロップシャドウに警鐘！シャドウだって色々あるよってことで今回はシャドウアイデア集です。 その1：黒じゃなくって補色をつかう デフォルトで#000000に設定されているドロップシャドウ、この色を変えるだけでもグッと洗練された雰囲気に。 たとえばハイライト部分がピンクならシャドウにブルー、という具合に。 この方法はイラスト一日体験教室で教えてもらった手法なのですが、補色関係ってこう使うのか！と目から鱗でした。 その2:シャドウに空の色＆地面の色を足してみる 屋外を想定したシーン、窓際のシーンでは、空の色をブラスした色を使用してみましょう。晴天ならブルー、夕焼けならオレンジ、夜なら深いブルー。さらに地面も光が照り返して反射します。 サンプルでは芝生なのでグリーンを追加。ドロップ