1カラムレイアウトはもはや王道! Webサイトデザインの基本を解説 | Webデザイン、これからどうなるの？（全10回）
もう縦スクロールって疲れません？進化する私たちの指と視野｜ワカモノのトリセツ
こんにちは！現役女子大生二人組による若者の今を伝えるメディア「ワカモノのトリセツ」です。 春休み満喫中の私たちは、自然と携帯を見る時間が増えました。 そんな時に、 「あれ？最近縦スクロールするのがもう嫌になってきたぞ？！」と思うようになったことに気づいたのをきっかけに、今回は縦スクロールについて私たちの最近の価値観をお話しします。 ■ 縦スクロールで満足できていた時代縦スクロールコンテンツで代表的なものはこちら。 ・Instagramのフィード投稿 ・コスメやファッション、旅行系のキュレーションメディア ・Twitterのタイムライン ・クックパッド ・Safari、Chromeなどのウェブブラウザたち 昨年の夏頃までは、まだ縦スクロールへのストレスが薄かった気がします。20件、30件とインスタのフィード投稿を見るのが全く辛いと感じませんでした。コスメやファッション、旅行系のキュレーション
プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】
なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで
【sketch】TwitterのUIトレースをして気がついた事｜Masaki
初めまして。UIデザイン勉強中のマサキ(@Masaki_4_5)です。 UIデザイン、とりわけiOS appのデザインスキルを得る一番の近道を探した結果、良いデザインから吸収するのがまず大事という事を聞きました。 このように、sketchで優れたアプリのUIトレースをし、その工程でページの遷移やそのUIになった訳を考察して行くことがスキル獲得にはもってこいらしいです。sketchさえあればお手軽ですしね。 早速Twitterのプロフィール画面とタイムラインの２画面を、Sketchを用いてトレースしてみました。Sketchを用いたトレースについてはネットで既に多く説明されていたのでつまずく事はありませんでした。 Twitterをトレースして気がついた事 左：元画像 右：トレース 1.フォントについてTwitterにはinstagramなどと同様に、和文には"Hiragino sans"、英文
dev.toと阿部寛のホームページどっちが速いですか？ - くうと徒然なるままに
dev.toと阿部寛のホームページどっちが速いですか？— あれからのぐりだけど (@_guri3) 2017年11月15日 という内容のツイートを見つけたので計測してみる。 ずっとパソコンに向かってて飽きてたので息抜きで。 dev.to というのは、 Qiita の海外版みたなやつです。一番の特徴はナビゲーションの速さ。 対抗するのは、 THE Traditional Web Site というたたずまいで有名？な 阿部寛のホームページ 計測 今回は、Google の PageSpeed Insights を利用していきます。 dev.to まずは、dev.to から 86/100 です！ 阿部 寛 のホームページ 92/100 です！ まとめ 伝統的ウェブサイトの方が早かった！
Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
本当は教えたくない！ド素人でも3ステップでオシャレなアイキャッチが作れる「Canva」 | 日常の最中に、
―驚くほどシンプルなグラフィックデザインソフトウェア― と自ら名乗ってますが、 本当に驚くほどシンプルで使いやすいんです。 Canvaのスゴイ所無料ハイ、神。 アイキャッチがオシャレなブログって巧みな編集スキルを持った方がillustratorやPhotoshopを使ってるじゃないですか。 Canvaなら一部有料の操作はありますが、無料でも問題なくオシャレな画像を作成出来ます。神です。 WEB上で使えるハイ、神。 使い始める際に面倒なダウンロードもインストールも必要ありません。 今少しでも興味があるならまず上のリンクからさくっと登録して使ってみるのが一番です！この後を読む必要もなくなります。 しかもネット環境さえあれば、作成途中であってもデータはWEB上に保管されるのでPCを変えようがすぐにさっきまでの状態から再開して作業を行うことが出来ます。神です。 直観的に操作出来るハイ、k(略 こう
コピペで使えるオシャレな配色パターン見本 25 （全組み合わせWebカラーコード付） - LITERALLY
今回はひたすら配色パターンを紹介していく。探しやすいように色ごとに分け、使いやすいように解説とWebコードも合わせて紹介する。プレゼン資料、Webデザインなどで目的に合った配色をそのままコピペして使って頂ければと思う。 ▼ 目次 カラフルな配色パターン 橙系の配色パターン 青系の配色パターン 緑系の配色パターン 黄色系の配色パターン 赤系の配色パターン 高級感を表現する配色 わび・さびを表現する和風配色 シンプルに格好良いグレーの配色 カラフルな配色パターン 1. 淡い「カラフル」 ■ #FF7D7D ■ #FFD580 ■ #B3E2B4 ■ #ABE7FF ■ #B8B2EA ■ #DBDBDB 淡いカラフルな配色は、白の背景に合わせると「透明感」を出すのに効果的。カラフル系の配色は扱いづらいので、上のコードをそのままコピペして使って頂くのが良いかと思う。 2. 力強い「カラフル」 ■
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
いつの間にか、日本が「いらすとや」だらけになってる - Jタウンネット
博多駅「マイング」の顔出しパネルを自宅に迎えた猛者現る 人々の顔ハメ続けて約8年、新たな居場所には仲間も
PHOTO METI PROJECT
ようこそ、まだ見ぬ日本の美しさへ あなたが知っている日本は、この国のほんの一部でしかありません。 日本には47の都道府県があり、そこには四季を映し出す豊かな自然と、 長い歴史を誇る建造物、各地で育まれた個性的な文化が広がっています。 まだ見ぬ日本の美しさを届けるため、FIND/47は生まれました。 © FIND/47 Office. Some Rights Reserved.Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution4.0 International license. © FIND/47 Office. Some Rights Reserved.Except where otherwise noted, content on this
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
配色大辞典 - Color Scheme
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
最近Webデザイン界で流行っている「Duotone」をうまく使えば超イケてるサイトに様変わりするに違いない - Brian'z Imagination
その昔アンディ・ウォーホルという巨匠が描いたマリリン・モンローのポップアートのレプリカが4年くらい前にマンションに飾ってあったのを思い出すけれど、最近Webデザイン界では海外を中心に「Duotoneデュオトーン」と呼ばれるデザインが流行りだしている。 シンプルでありながら、ポップでビビッドで非常に印象に残るデザインなので、「Duotone」を極めれば超イケてるサイトになりそうな予感。 最近流行っている「Duotone」って何ぞ？ 「Duotoneデュオトーン」は「Duo(2つの)」＋「tone(色)」をあわせた言葉で、ベースとなるミドルトーンとハイライトカラーの2色を中心に描き出されるハーフトーン作品のこと。Duotone作品自体は昔から存在するのだけれど、昔のアーティストが一生懸命に写真をつなぎあわせていた時代から時が経ち、Photoshopのアップデートで簡単に写真を加工してDuoto
Kazesawa フォント: M+ と Source Sans Pro の合成フォント
豊富なウェイト Extralight, Light, Regular, Semibold, Bold そして Extrabold の 6 種類ものウェイトを使い分けることができます。 繊細なシーンから、力強さが必要なときまで自由自在に表現が広がります。 自由なライセンス Kazesawa フォントは、非常にゆるいライセンスの M+ フォントと、SIL Open Font License のもとに配布されている Source Sans Pro の合成フォントなので、Kazesawa フォントも SIL Open Font License に基づいて提供されます。 このライセンスは FSF によってフリーであると認定されています。 Kazesawa フォントは使用や再配布を自由に行うことができます。 Kazesawa フォントは、もちろん Web フォントとして使用することもできます。 圧縮さ
元Googleの中の人がハイテク企業がどうやって「ユーザーの心を乗っ取るのか」をタネ明かし
Googleに買収されたサービスAptureでCEOを務めていたトリスタン・ハリス氏が、ユーザーのサービス依存度を高めるためにテクノロジー企業がどのような手法を取り入れているのかを解説しています。マジックの経験があるハリス氏は、その手法を人間の心理を上手く利用している点でマジックに通じるところがあると評価しています。 How Technology Hijacks People’s Minds — from a Magician and Google’s Design Ethicist — Medium https://medium.com/@tristanharris/how-technology-hijacks-peoples-minds-from-a-magician-and-google-s-design-ethicist-56d62ef5edf3#.aec83wojz IT企業が出
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
Login • Instagram
Welcome back to Instagram. Sign in to check out what your friends, family & interests have been capturing & sharing around the world.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEB COLOR 216
UX MILK
