ミルクボーイがUIとUXの違いを説明したら｜広野 萌
挨拶内海「どうもお願いします。ありがとうございます。今、NFTアートをいただきましたけどもね。ありがとうございます。こんなんなんぼあってもいいですからね」 駒場「いきなりなんですけどね、うちのおかんがね、好きなIT用語があるらしいんやけど」 内海「そうなんや」 駒場「その名前を忘れたらしいねん」 内海「IT用語の名前忘れてまうってどうなってんねん。あれやろ、IT用語ゆうたらどうせ、デザイン思考か、アジャイル開発か、リーンスタートアップやろ！」 駒場「俺もそう思ったんやけどちゃうらしくてな、いろいろ聞くんやけど、全然わからへんねん」 内海「そうなん？」 駒場「うん」 内海「ほんだら俺がね、おかんの好きなIT用語、一緒に考えてあげるから、どんな特徴言うてたかとか教えてみてよ」 定義駒場「おかんが言うには、製品やサービスとの関わりを通じて利用者が得る体験及びその印象の総体やって言うてた」 内海「
なぜ、ハイパーリンクは青色なのか?
Mozillaブログより。 エリーゼ・ブランチャード インターネットは私たちの生活のあらゆる場面に浸透していますが、デジタルの世界では当たり前のように使われているものがあります。それは、多くのリンク、特にハイパーリンクが青色であることに気づいたことがありますか? 同僚が何気なく「なぜ、リンクが青いのか」と聞かれた時、私は戸惑いました。2001年からウェブサイトを制作しているユーザ・エクスペリエンス・デザイナーの和tがしは、常にリンクを青くしてきました。私は青の特定の色調を提唱してきました。しかし、「なぜリンクが青なのか」と疑問に思ったことはありません。それはただの事実でした。草は緑で、ハイパーリンクは青です。文化的に、私たちはリンクを青色に関連付けているため、2016年にGoogleがリンクを黒に変更したときには、かなりの混乱が生じました。 しかし今、私は「なぜ、リンクが青なのか」と言う疑
ウェブサイト作成のよくある間違いと解決テクニックまとめ【保存版】
この記事では、ウェブサイトを作成するときによくある間違いを、具体的なサンプル例と解決テクニックと一緒にまとめています。 一般的なランディングページでありがちな間違い 1. コンテンツがブロックに分割されていない 論理的なブロッグにグループ化することで、ユーザーが情報を理解しやすくなります。パディングを120〜180pxに設定し、背景色を活用して文字テキストだけのコンテンツを分割することができます。 コンテンツ間のパディングはほとんどなく、コンテンツを分割するために背景色の利用が必要。結果として情報を要約するのがむずかしく、どこに何が書かれているのかわかりにくい（上） パディングを十分に確保し、ブロックごとに色で区切られており、どこまでがコンテンツに含まれるのかすぐ分かります（下） 2.Webページのアイテム間の余白スペース幅が不揃い 論理的に分割されたブロックの周りには、同じサイズのパディ
拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
50 Yellow Web Designs to Inspire You
4 Pings & Trackbacks Pingback: 50 Beautifully Brown Web Designs | Inspiration Pingback: 55 Minimal Black and White Web Designs to Inspire You | Inspiration Pingback: 50 Green Web Designs to Inspire You | Inspiration Pingback: 50 Red Web Designs to Inspire You | Inspiration 40 Comments I really love all of the inspiring designs you guys have been posting lately, thanks so much! Great collection! Th
HTML Color Code Combination Chooser | Resources for Web Design For Developers
Choose the best HTML color combinations with this free tool. Easy to use color finder that generates HTML codes.Coversion Warning? The warning symbol shows when there is a difference between the chosen colour and the base output colour. It is important to note that RGB has a far greater range of colours than the pigment based RYB colour wheel. The tool will will choose the closest match. If you w
イマサラとは言わせない斜めストライプの活用法 - builder by ZDNet Japan
デザイン面での要求があまり高くないWebアプリケーションでは、インターフェイスはシンプルで短時間で制作できるものが好ましい。しかし、あまりにシンプルすぎてなにか物足りないような、画面が締まらないような感覚になってしまうことはないだろうか。 そんなときのポイントは「ディテール」にある。細部まで作り込んだ印象を与える画面作りをすることで、シンプルでも飽きのこないイメージになるのだ。そんなに細かいところまでいちいち作り込んでいられないって？ 時間が無くても大丈夫。繊細なタッチのストライプパターンをひとつ用意しておけば、「ディテールに凝った画面」イメージを手軽に演出できる。 今回は、細い線で構成されるストライプパターンを作成する。「ストライプ」といっても水平・垂直線ではなく、斜め45度のパターンだ。この斜め45度方向のストライプは近年好まれているグラフィックアイテムで、さまざまな要素と組み合わせる
超入門：Webデザインと解像度のハナシ - builder by ZDNet Japan
アプリケーションにとって最適な画面解像度とは？ 私が初めてウェブ開発の世界に足を踏み入れたときは、640x480の画面解像度を前提にアプリケーションを作るのが慣例であった。現在、一般的にはその標準は800x600であると考えられているが、ウェブ開発コミュニティの間ではより高い解像度を標準にしようという動きもある。確かに、新しい標準を用いるのがよい場合もあるかもしれない。しかし、その決定を下す前には、さまざまな要素について検討する必要があるだろう。 解像度のすべて 画面解像度の詳細に関して、簡単に復習してみよう。「解像度」という用語は画像のシャープさや明瞭さを表す語であり、プリンタやモニタの出力品質を表す際によく用いられる。たとえば「モニタの画面解像度」と言った場合は、画面上にあるドット（ピクセル）の数を示している。 画面解像度が800x600ということは、600のライン上に各々800個の別
Stu Nicholls | CSS PLAY | Professional horizontal menus
CSS MENUS › Professional horizontal series Date : August - November 2007 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Professional #1 Home Privacy Policy Products Where to find us Contact us Search Download Pro menu #1. Please read terms and conditions below. Professional #2 Home Privacy Policy Products Where to find us Contact us Search Down
「左上の魔術師」理論
Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ
Put Your Best Foot Forward: 19 Gorgeous Website Footers
Products Moz Pro Your all-in-one suite of SEO essentials. Moz Local Raise your local SEO visibility with complete local SEO management. STAT SERP tracking and analytics for enterprise SEO experts. Moz API Power your SEO with our index of over 44 trillion links. Compare SEO Products See which Moz SEO solution best meets your business needs. Moz Data Power your SEO strategy & AI models with custom d
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
Localhost80.com is for sale | HugeDomains
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
ユーザーはサイトのここを見ている | ユーザー視点のウェブデザインガイド | Web担当者Forum
サイトを訪れたユーザーの情報閲覧には、いくつかの基本的な行動パターンが存在する。サイトの性質にも左右される部分はあるが、以下に挙げるポイントを踏まえて画面を作成することで、スムーズにサイトを見てもらえるようになる機会がぐっと増えるはずだ。 ［1］ナビゲーションでユーザーを誘導できると思ったら大間違い「グローバルナビゲーションが設置されているのだから、当然ユーザーはそこからリンクを辿ってくれるはずだ」と思っている方はいないだろうか。 数多くのユーザビリティテストを実施していて毎回痛感するのが、「ユーザーはナビゲーションをなかなか見ない」という点である。これはなぜか。 ユーザーは、あくまでサイトの「コンテンツ」を見に来ている。そのため、ナビゲーションは常に後回しにされてしまうのである。後回しにされて、それでも必ず見てくれるのであればまだよい。しかし現実には、ユーザーはコンテンツ部分をざっと見て
厳選10本！ブログで使えるスグレモノツールまとめ :: Love & Design ::
プロのWebデザイナーじゃないけど、ブログをもっとカッコよくしたい！もっとオシャレに見せたい！という方のために、これまで紹介したブログで使えるスグレモノツールをまとめてみました。 便利なフリーソフトはたくさんありますが、この中でお気に入りが見つかるとうれしいです。 名付けてsweetloveパック（livedoor風味） 画像系 ImageChef（日本語・携帯にも対応） ワンポイントや mixi のプロフィールにどうぞ 画像が簡単にできるジェネレーターいろいろ :: Love & Design :: Polaroid-o-nizer™ ポラロイド風や枠をつけてオシャレに演出 写真をオシャレに見せたい人のための便利なツール :: Love & Design :: デザイン系 Dynamic Drive CSS Library タブメニューなどが豊富に揃っています。 誰でも簡単にCSSカスタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The beauty of minimal CSS: 25 outstanding examples - FrancescoMugnai.com - Graphic Design Inspiration and Web Design Trends
minimalsites | minimal design website gallery
asparkcreative.com is almost here!
Dynamic Drive DHTML(dynamic html) & JavaScript code library
認証がかかっています