リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA
ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら本記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用
Web制作の現場で「イメージボード」を活用し、実感した3つのこと ｜untenna（アンテナ）
こんにちは、デザイナーの佐々木です。 ユニオンネットのデザイナーチームでは、半年ほど前からデザイン着手前に「イメージボード」を作る取り組みをしています。（一般的にはムードボードとも言います） お客様と直接話す機会の少ないデザイナーにとって、ディレクターとデザインの方向性を共有することは成果につながるサイト制作として非常に重要な作業になります。 今回、実際に取り組みを半年間続けてみて、チーム内で感じた点をいくつか紹介していきたいと思います。 イメージボードとは？ 一般的には「ビジュアルのサンプルを集めたもの」です。 言葉で表しにくい視覚的なイメージをまとめたり、抽象的な意図が伝わるように「こんな感じ」を集めたアイデアブックです。 実際のイメージボード 作成のタイミングは、ディレクターとの初回打ち合わせの後。デザインに入る前に作成します。 まずはクライアントの「大事にしていること」「伝えたいイ
【Webデザイン】Adobe XDで時短になる使うべき機能3選。 | ネクストページブログ
HOMEブログウェブ制作【Webデザイン】Adobe XDで時短になる使うべき機能3選。 | ネクストページブログ こんにちは、デザイナーのゆきじです！ WebデザインをXDで作る機会が多く、時短になると感じた機能があったので3つ紹介します。 アピアランスをペースト（Command(Ctrl)+Option(Alt)+V） オブジェクトやフォントの見た目（色やシャドウ、フォントのスタイルなど）を別のものに反映することができるのがアピアランスをペーストです。 やり方は、元となるオブジェクトやフォントをコピーして、適用したいものにアピアランスをペーストで反映されます。 図形のwidthやheight、長方形から丸にするなどは反映されないようですが、角丸などは反映されます。 カラーの登録 色を登録し、簡単にその色を呼び出すことができるものです。 カラーの登録は、オブジェクトを選択したときに右に表
【ページ内リンクのUIデザイン】悩んだ時に参考にしたいWebサイトまとめ | コラム | ホームページ制作 大阪 インフォメーションメディアデザイン株式会社
ページ内リンク（アンカーリンク）は、コンテンツ内の言わば目次のようなもの。 メインのナビゲーションに比べると、それほど重要性は高く見られていないかもしれません。 ですがデザイナーの私が、Webサイトの構成やデザインを考えるとき、 メインナビと同じくらい悩まされるのが、ページ内リンクのUIデザインです。 ・ターゲット層は？ ・企業イメージ・ブランドコンセプト・時代にマッチしてる？ ・コンテンツの重要度は？ などなど、、、、 今回は、ページ内リンクのUIデザインに悩んでしまった時、 参考になる15個のWebサイトを、タイプ別にご紹介したいと思います。 1. ブラウザに追従するタイプ 1-1. 川重商事株式会社 ファーストビューでブラウザの左下端にひょこっと現れて、小さく収納もできるページ内リンク。 PCもスマホも同じUIデザインで、リンクエリアの背景が少し透過されているところも親切です。 ●P
UXデザイナーは本当にデザイナー？UXデザインの役割の拡大 デザイン会社 ビートラックス: ブログ
最近とあることに気づいた。UXデザイナーポジションへの応募が多いが、そのバックグラウンドがかなり多種多様なのである。 元々Webデザイナーをしていた人もいるし、マーケター出身の人もいる。デザインとは関係のない学部や職種出身の人もいるし、前職がスタバのバリスタのケースもあった。 UXデザイナーの肩書きがインフレ気味最近では多くのデザイナーがUXデザイナーになりたがっている。 どうしてそうなってしまったのだろうか？おそらく、その裏には我々デザイナーの悲しい存在価値がある。 企業におけるデザイナーの存在は、テクノロジーやマーケティングなど、「動くか動かないか」や「数字」で判断される分野とは異なり、デザインは常に数値化が困難な分野。その不透明さゆえに、ビジネスのフィールドにおいて我々の仕事はあまり真剣に捉えてくれない壁があった。 そこで出てきたのがデザインとビジネスを融合させ、結果に繋がるデザイン
フッターがダサいWebデザインはクソだ。 | NASU Co.,Ltd. 遊び心のデザイン会社
株式会社NASUで働くスタッフが1万字ぐらい書けるくらい好きなことについて書くスーパーマニアック記事。今回はWebデザイン大好きな私が「フッターデザイン」の魅力をテーマに記事をお届けしたいと思います。 この記事では、どうして表層的でダサいフッターが生まれてしまうのか、ダサいフッターを克服するためにはどうしたらよいのか、このWebサイトのフッターが痺れる！など。普段なら言わない心に秘めていることを、ありのまま書いてみようよ思います。 まずは、今回のスーパーマニアック記事を書いております、私の簡単な自己紹介からさせていただきます。 NASUでは、Webサイトの設計・デザイン・コーディングなどWebサイト制作に関することを丸っと担当しております。牧瀬と名乗っております、中川誠也と申します。趣味は、Webデザインに関する勉強と、マイクラやソウルライクなゲームをすることです。現在は、修行中のためゲー
クライアントからの「思ってたのと違う」にはどう対応すべきか？ | ベイジの日報
どれだけ理屈が通っていても、どれだけいい戦略でも、クライアントワークは最終的に成果物の仕上がりで評価されることが多い。 とはいえ、それはプロセスを軽んじてもよいということではない。クライアントが納得できるものを作るためには、都度発生する議論でクライアントを正しく導けることが重要だ。すべての土台になる前提の認識にズレがあれば、双方でコミュニケーションをとりながら1つひとつ潰していくべきだろう。 しかしプロジェクトメンバー内で綿密に認識をすり合わせながら順調に進めていても、突然の番狂わせを発生させるものがある。普段は忙しく現場にいらっしゃらない、決裁者の鶴の一声だ。 現場のご担当者と決裁者がコミュニケーションを取れる頻度は会社によって違い、場合によっては決裁者の意向をきちんと確認できていないこともある。それがミーティングで初めて明らかになり、決裁者から「思っていたのと違う…」というコメントをも
お問い合わせありがとうございました。
Contactお問い合わせ お問い合わせ内容入力 入力内容の確認 送信完了 送信完了 お問い合わせありがとうございました。 ご入力いただいたメールアドレスに【お問い合わせ受付完了メール】を送信しました。 しばらく時間をおいても【お問い合わせ受付完了メール】が届かない場合は、お客様にご入力いただいたメールアドレスに誤りがある可能性が考えられます。その際はお手数ですがご確認の上、再度送信してください。 お問い合わせいただいた内容につきましては、近日中にお返事させていただきます。 トップページへ戻る
HTMLとCSSで、デザインと1pxのずれもなく正確に実装する必要はあるのか？ ピクセル パーフェクトの現状
デザインと1pxのずれもなく、HTMLとCSSで実装することを「ピクセル パーフェクト」と言います。このピクセル パーフェクトは必要なのか、現在の制作で求められているのは何か、ルックアンドフィールに合わせた実装を紹介します。 The State Of Pixel Perfection by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ピクセル パーフェクトとは 2010年頃のWeb制作 ルックアンドフィール コード化された結果がパーフェクトかどうかの判断 バリエーションとコンテキスト 現在の状況 モダンCSS CSSフレームワークの影響 好き嫌いではなく、期待通りに デザイナーに役立つアドバイス デベロッパーに役立つアドバイス 終わりに はじめに 「ピクセル パーフェクト」という言葉を最
レイアウトデザインに迷わない！コツと作り方を10種類まとめました！ | デザイン研究所
デザインにおけるレイアウトのポイントを知ることで圧倒的に作りやすくなります。 今回の記事ではそんなレイアウトに関してのデザインポイントを紹介！ どんなデザインにもレイアウトは存在します。 そんなレイアウトのよくあるパターンやプロが考えているポイントを解説していきます。 レイアウトデザインに迷わない！コツと作り方を10種類まとめました！このデザイン研究所のブログではたくさんのデザインポイントを1つずつ紹介しています。 そんな中でレイアウトに関した厳選記事を紹介していきますね。 デザインの基礎知識からテクニックまで解説していきます！ ちなみに毎日デザインのポイントを解説するインスタアカウントを運営しておりますのでそちらのフォローもよろしくお願いします！ レイアウトデザインのコツ①：対比構造を表す2分割のデザイン 2つの要素を対比させた、○○×○○や○○vs○○、○○or○○などの対比に使える2
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
はっきりと分かるようにデザインされたUIは、最高のUI
多くのデザイナーが日々、使いやすいデザインについて模索しています。 WebページやスマホアプリのUIデザインにおいて、使いやすいデザインへの一つの答えとなる記事を紹介します。 すっきりデザインされたUIよりも、はっきりと分かるようにデザインされたUIの方が使いやすい最高のUI！ The Obvious UI is Often the Best UI by Susanna Zaraysky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 下部のナビゲーションバー = 使用率の増加 下部のナビゲーションバーとアクセシビリティ 「明白な」アイコンが「一般的な」アイコンとは限らない 他のUIをコピーしても、明白なデザインは保証されません 明白なものを見つけるには、問題点を見つけること はじめに フランスの哲学者ヴォルテールの言
世界はデザインでできている｜嶋津 / Dialogue designer
アートディレクターの秋山具義さんの本が出ます。 『世界はデザインでできている』というタイトルです。具義さんの思考がぎゅっと詰まっています。具義さんが引いてくれた補助線を参考に世の中を見ると、世界のいたるところに宝石が散らばっていることに気付きます。言い換えると「デザイン」というメガネを通して世の中を見るだけで、僕たちは見えなかったものが見えるようになる。今よりもクリエイティブになることができます。そして、デザインのことが大好きになります。 僕は、この素敵な本に「構成」として関わらせていただきました。 僕が具義さんと出会ったのはちょうど一年前。れもんらいふデザイン塾の講師として具義さんは登壇されていました。僕はその塾のレポートを作成するため、取材を兼ねて講義を受けていました。 打ちのめされました。おもしろいんです。「興味深い」という表現ではなく、具義さんの講義はれっきとおもしろいんです。会場
UI デザイナーなら抱いて寝るべき1,198gの道具箱｜Fenrir Designers
来年新卒入社する UI デザイナーにブックリストをおくるから、おすすめの本はないかと同僚に聞かれたので「 そりゃあもう、オシドリ本一択だろう 」と即答した。 O'Reilly の『 デザイニング・インターフェース 第2版 』Jenifer Tidwell ( 著 )、色鮮やかな水鳥の細密画が目を引く、通称オシドリ本。UI デザイナーならおそらく、手にしたことないという人はいないだろう。 しかし私の返答に、同僚は苦い顔をしたのだ。 「 それはちょっと初学者には重いと思います... 」 重い？何もハーマンを読めとは言ってないじゃないか。オシドリ本だよ？何一つ難解な表現などないこの本が重い？心外だな、と思いつつも手にとってみたら、なるほどずっしり重かった。 うん、これは 1kg はこえている気がする。なんだか無性に気になったので測ってみたら 1,198g あった。 確かに重いな。電車で読んだりす
効率的なデザイン運用のために、Sketchガイドラインを作ってみた話 - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
こんにちは。今年の1月からクラウドワークスに参画しました、UIデザイナーの井上です。 designer.crowdworks.co.jp 先日公開された、この記事を目にした方も多いのではないでしょうか。 そうです、私がTwitter転職の人です。 時間が経つのは早いもので、入社してから一ヶ月が経とうとしています。 さて、いきなりですがクラウドワークスに入ってまもない私が、効率的なデザイン運用をしていくためにSketchガイドラインを作ってみました。 その名も「baabaa Sketch Guidelines v.1.0.0(バーバースケッチガイドライン)」です！ ※「baabaa」とは「メーメー 」っていう羊の鳴き声のことです！ だんだんと膨張して行く無駄なデザインやシンボルを羊の毛に例えていて、その毛を削ぎ落とし必要な要素だけを蓄えたデザインデータにしていこうという施策になります。 今回
2019年に流行するWebデザインの最新トレンド18個まとめ | Web Design Trends
そろそろ2018年も終わりを迎え、2019年がやって来ようとしています。この1年でWebデザインのトレンドにも様々な変化がありましたが、2019年はどのようなWebデザインの手法が流行するのでしょうか？ 最新のWebデザインのトレンドを取り入れることによって、Webサイトを魅力的に見せることができたり、使いやすいWebサイトを提供することができるなど、様々なメリットが生まれます。 今回は、2019年に流行するWebデザインの最新トレンドを一気にご紹介していきたいと思います。 2029年のWebデザイントレンドに関する記事を公開しました！最新情報を知りたい方はこちらをご覧ください。 2022年に流行するWebデザインの最新トレンド10個まとめ 2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注
余白で情報整理、余白で視線誘導、余白で視認性アップ、デザインがうまくなりたい人に余白の使い方が学べる良書
Webデザインでも紙のデザインでも、余白を上手に使ったものは洗練された印象を与えます。情報を整理したり、視線を誘導したり、可読性や視認性をアップさせたり、余白はデザインにおいて非常に重要な要素です。 最近各所で話題になっている「けっきょく、よはく。」をじっくり中身を見ながら紹介します。読んだらすぐに実践したくなるデザインのテクニックが満載です！ デザイナー初心者にありがちな「何かが違うのは分かるけれど、どこをどう修正すればいいのか分からない」「プロが作ったようなデザインができない」など、デザインでよくある悩みをずばりと解決してくれる一冊です。 初版・2版は速攻で売り切れてしまったそうです。先日3版が補充されたばかりですが、予約分もあるため、それほど多く出回らないかもしれません（版元様よりの情報）。 ※品切れになってしまっても、さらなる増刷が決まっているため、予約で確実に入手できると思います
こういう解説書を待ってた！Webサイトやスマホアプリにおける認知心理学の効果や実際の使用例が分かりやすい
最近のWebサイトやスマホアプリでは、認知心理学が多く取り入れられるようになりました。キャンセルボタンを右と左のどちらに配置すべきか、顔写真を使用した時の目線の向き、ボタンの大きさや配置方法など、心理学のテクニックが使われています。 Webサイトやスマホアプリのインターフェイス、マーケティングにおける心理学の効果やテクニックを解説したオススメの本を紹介します。 本書は、本日発売！！ デザインと心理学の解説書はいくつかありますが、Webサイトやスマホアプリに特化されたものは少ないと思います。 普段実践しているデザインの考え方が言語化されていたり、目にしていたけどこんな効果があるのかという発見もあり、デザイナーだけでなく、ディレクターや制作に携わるすべての人にお勧めです。コンテンツ編集者やブログを書く人にも役立つと思います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
情報をデザインするこつがよく分かる！デザインの手順がこんなにも詳しく解説された本は初めて -伝わる[図・グラフ・表]のデザインテクニック![情報をデザインするこつがよく分かる！デザインの手順がこんなにも詳しく解説された本は初めて -伝わる[図・グラフ・表]のデザインテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/989a806d2ccf27431e67d306fd1bab102cd42f70/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202003%2F2020082101.png)
週末読みたい本『けっきょく、よはく。 余白を活かしたデザインレイアウトの本』 ｜ 箱庭 haconiwa｜女子クリエーターのためのライフスタイル作りマガジン