レスポンシブ・ウェブデザインは上位表示に有利ではない、デメリットもある
[対象: 中〜上級] Googleが推奨するモバイルサイト構成はレスポンシブ・ウェブデザイン Googleは3つのタイプのモバイルサイト構成をサポートしています。 レスポンシブ・ウェブデザイン（同じURLと1つのHTML/CSS） 動的な配信（同じURLと別々のHTML/CSS） モバイル専用のURL（異なるURLと別々のHTML/CSS） このなかで、Googleがもっとも推奨する構成が1つ目のレスポンシブ・ウェブデザインです。 レスポンシブ・ウェブデザインには大小さまざまなメリットがあります。 なかでも、URLが1つ、リダイレクト設定が不要というのがいちばん大きなメリットでしょう。 重複コンテンツを生まないし、リダイレクトによるミス（Googleの人によれば非常に多いらしい）も発生しません。 検索エンジンにとっても都合がいいのがレスポンシブ・ウェブデザインになります。 レスポンシブ・ウ
フラットデザインについて @maka_velicom が思う6つのこと。 / Maka-Veli .com
フラットデザイン、流行が止まりませんね。国内サイトや記事でも、以前にも増して見かけるようになりましたし、TLでもよく議論しているのを見かけます。iOSもフラットデザインに～みたいな話もあったり、TwitterBootStrap3.0もフラットデザインですね。そんな僕もロゴ変更時にフラットチックにしていますし。個人的にもけっこう好きです。なんで好きなのかと言うと、「色」が好きなんです。色そのもの。というわけで、以下、個人的に注意している点です。 あ、始めに言っておきますが、このブログデザインがフラットデザインの正解だ、なんて本当に1mmも思ってません。むしろ前のデザインにむりやり組み込んだこのデザイン、これでフラットデザイン語るなんてヤバいです。勉強し直す自戒も含めて、書かせて下さい。そして読んでくれた皆さま、心より御礼申しあげます。 英語圏と同じにしない テキストで大胆なタイポグラフィ
UXを学ぶならこれだけは目を通しておけ！ - UX-design
2013-04-11 UXを学ぶならこれだけは目を通しておけ！ UXとはなんぞや!?って日々思いながら手探りでUXを意識したサービス開発、UXの向上を測っております、どうも @tacumacy です。 ボク自身、UXのことはなんとなーくわかってはいましたが、本格的にそれを仕事としてやろうとなった時から本気で勉強しなきゃやばい！と思い猛烈に危機感を感じたので、めちゃくちゃネットサーフィンをしてUXに関する情報を集めては読みまくりました。そこでボクが読んで参考になった書籍や記事を、どうせならここでまとめて見れるようにしておこうと思います。もし勉強したいな、と思ったときに見ていただけると幸いです。 こんな人に読んでほしい ・これからUXを学びたいと思っている人 ・UXについて、手っ取り早く情報が欲しいと思っている人 書籍紹介 以下、これだけは頭に入れておきたいなぁと感じた内容をまとめてくださって
優れたUXデザイナーが持つ資質・マインドセットとは？【インタビュー】ホワイトハウスも注目のUXデザイナーJanice Fraser氏（後編） デザイン会社 ビートラックス: ブログ
前編の「ユーザーエクスペリエンスとは何か？」【インタビュー】ホワイトハウスも注目のUXデザイナーJanice Fraser氏（前編）では「UXとは何か」といった基本的・概念的な部分を中心に取り上げたが、本編では彼女の少しユニークなバックグラウンドや、良いUXデザイナーが持つ資質やマインドセット、彼女がホワイトハウスでのワークショップでも語ったという「Lean UX」等に焦点を当てていく。 ◆目次（後編）◆Janiceさんのバックグラウンドを探る良いUXデザイナーになるには？Lean UXとは？日本へ向けてのメッセージ ◆話者プロフィール◆ゲストトーカー：Janice Fraser LUXr, Inc. CEO @clevergirl UXデザイナー、起業家。UXを重視したウェブサービスのデザインを手がけるAdaptive Path社の共同創業者、初代CEO。 15年に渡るシリコンバレー・ス
有名なフォント12種類の紹介とフォントの基礎知識について - YATのBLOG
2013年 01月 09日 今さら聞けない？有名なフォント12種類の紹介とフォントの基礎知識について カテゴリ： Font タグ：Font 新年明けましておめでとうございます。今年も色々と挑戦する年にしたいのですが、一先ずブログをしっかり書くというのをベースにがんばります。 早いもので、このブログも気がついたら3年が過ぎ4年目に突入していました。立ちあげ当初は辞めないことを目標にしていましたが、続けることが大事だなと今でも思っています。皆様本年もよろしくお願いします。 今回は自分がよく使っているフォントをまとめました。他にも使っているフォントはもちろんあるんですが、基本的なフォントやWebベースで使えるフォントあたりを紹介しています。 1.フォントリスト 2.フォントの基本 3.考察 フォントリスト 欧文フォント 1.Arial 2.GEORGIA 3.Myriad 4.Verdana 5
ECサイトにおける色違いやサイズ違いの商品ページのベストプラクティス
[対象: 中〜上級] この記事では、同じタイプの製品で色やサイズに複数のバリエーションがあるときのページ構成について解説します。 記事タイトルに「ベストプラクティス」と入れましたが、どんなアイテムを取り扱っているか、どんなシステムでサイトを構築しているか、すでに公開しているページかそれとも新規に公開するページか、検索需要はどのくらいあるか、何を最優先にするかなどさまざまな要因に依存するため、「この構成がベスト」と言い切ることはできません。 またそれぞれの構成にメリット・デメリットがあります。 したがってあなたのサイトの状況に応じて参考にしてもらえればと思います。 今回紹介するのは3種類の構成パターンです。 全バリエーションのページのみ 全バリエーションと個別のページ 個別ページのみ 順に説明します。 全バリエーションのページのみ 色ごとやサイズごとのページを設けません。 すべてが載ったペー
[webデザイン]目的を実現する為の3段階のwebデザイン能力
webデザインの仕事はたくさん！ webデザインって一口で言っても色んな人がいますよね。美しくてうっとりするようなデザインが出来る人、イラストが描けて温かみのあるデザインが得意な人、プログラミングやwebサービスを駆使して思いもよらない表現をする人…。 それらはその人がこれまで制作してきたものや学んできたことから形作られてきたものです。一体どんな能力を磨けばそうなることができるんでしょうね。webcre8の考えるwebデザインの仕事、それに必要なこと、学び方を整理してみました。 思うに、webデザインに必要な能力とは、発想力、知識、技術力です。 ちなみにこの記事は「web制作のワークフローのどこまでをwebデザインと呼ぶのか」という話ではなく、「どういう能力を身につければデザインが良くなるのか」と言う話です。 webデザインに必要なこと：発想力 webデザインに必要な発想力とは、必要とされ
![[webデザイン]目的を実現する為の3段階のwebデザイン能力](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e00deab8d0b9414ec4b7306af9d6ad2fdc13775/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F11%2Fwebdesign-3-ability02-150x150.png)
ポジティブ心理学から学べるデザイン思考
デザインはよく「問題を解決するための設計」と解釈されることがあります。HCD の観点からみると、その意味合いは強いでしょうし、人が扱うアプリケーションに携わる仕事をしている方であれば、常に問題解決のためのデザインを意識されていると思います。タスクを完了するためにはどうすればシンプルで効率が良いのか、ゴールに辿り着きやすくするための使いやすさを設計するのがデザインですが、それだけではありません。 目の前にある問題を解決するだけではなく、いかにポジティブな感情を引き出すのかもデザインの大きな課題です。ポジティブな感情を引き出すためのデザインをするという意味合いから UX という言葉が使われることがあります。「気持ちのよい」「爽快な」といったポジティブな言葉をつかってデザインを評価することがありますが、これもデザインが問題解決だけではないという表れなのでしょう。デザインを通して、ちょっとポジティ
文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WEBデザイナー／フロントエンドデベロッパーが英語と技術を学べる超おすすめのサイト | バンクーバーのうぇぶ屋
先日『技術と英語を同時に、しかも無料で勉強できる画期的な方法 – Google Japan Developer Relations Blog』という記事を拝見させて頂きました。 なるほど、確かにWEB屋であればWEB系のネタを見聞きしながら英語を学ぶってことは非常に有効な学習方法のひとつなのかもしれませんね。こういう話しもネタになるのかと勝手に感銘を受けましたので、僕もひとつ知っているサイトを皆さんとシェアさせて頂ければと思いまっす。 僕は完全にフロントエンドの開発、ディレクション畑の人間なので、自分の興味ある分野としてご紹介するサイトは英語はもちろん技術的なお話を聞くのに超オススメなんですよーってお話す。 ShopTalk: A Web Design and Development Podcast with Chris Coyier and Dave Rupert Chris Coyle
新しくWebサイトを作る際に疑いたい制作側の常識
ここ最近クライアントの受託制作や自社のWebサービスでユーザー様の声を見ていて気がついたことがあるので書いてみます。 iPadやスマートフォンの普及でWebサイトがより身近になってきて、今までPCを起動するのが面倒だった方まで気軽にインターネットを使うようになってきています。 その分、Webサイトを作るにもいろいろなことを配慮しないといけなくなってきています。 デザイン、インターフェイス的に各媒体に最適化されていることも大事ですが、Webサイトを見慣れている人の常識というのを少しづつ疑って、見直していく必要があると思うのです。 制作側の常識が通じないとネットリテラシーが低い、などとまとめてしまうような風潮もありますが、そのリテラシー自体見直すべきなんじゃないかな？なんて思ったりもします。 実際にWeb制作業界ではない色々な方のご意見をうかがったうえで、Web制作をする際に、自分たちが割と「
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
HTML5でつくられた、ページ遷移・画面遷移のアイディアがすごい
HTMLファイ部のほんだです。シュッ 「ページ遷移」、聞くだけでゾクゾクしませんか？ 僕は大好きです。 Web Creator's Contest Q（HTML、CSS、JavaScript エンジニアのためのコンテストサイト）では、 ページ遷移・画面遷移をテーマにしたコンテストを開催中です。 とても好評で、5回目となった当コンテスト。 今回のテーマも、力の入ったコードがたくさん投稿されています！ 魅力的な画面遷移エフェクトのコード集！ Cubic Transition ※「▶Play」ボタンをクリック！
モリサワの「新ゴ」フォントがWebでCMSと連携、クラウドフォントで拡がるWebデザインの可能性とは | イベント・セミナー
フォントを活用したデザインがテーマの本セミナーには、紙媒体をメインとするグラフィックデザイナーやWebデザイナーが参加した。セミナーではまず、ロフトワークの濱田真一氏が「クラウドフォントで手に入れる新たな表現力」という題目で講演。 Webデザイナー歴8年、現在はディレクターとして活躍する濱田氏が、「クラウドフォントとは何か」といった基本から、実際の顧客企業への提案事例まで説明した。 まず、クラウドフォント（Webフォント）とは、インターネットを介してフォントを配信し、ブラウザのWebページ表示に使う仕組みだ。ユーザーのデバイス（PCやスマートフォン）にフォントが搭載されていなくても、制作者側が指定したフォントを表示できるのが特徴。 一般的に、Webデザインで特殊なフォントを利用する場合は、テキストを画像化するものだが、クラウドフォントを使うと「たとえば、見出しには立体的な文字を使い、リード
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
デザイナー必見！アナタにとっての『見たことも無いデザイン』を探すことが出来そうなサイト色々！ | バンクーバーのうぇぶ屋
WEBサイトを作る時、アイデア出しに詰まったりするなら参考になりそうなサイトを探したりするのもアリだと思いますが、たまには『WEBデザイン』の枠を超えた所からアイデアなんかが思いつくこともしばしばかと思います。 特にスペシャルコンテンツ的なサイトを作るときには、時として奇抜なアイデアや見たことも無いようなインパクトを必要とされる事もしばし。そんな時僕は一度“WEBデザイン”のことを忘れ、WEBデザイン以外のギャラリーや専門サイトを見る事も少なくはありません。 配色ルールなんかをインテリアやファッションデザインからヒントを得る的な記事も前に書かせてもらいましたが、似たような事かなと思います。たまにはWEB以外のデザインに目を通して違う発見やアイデアを得るための時間を作るのも面白いものですよー！ というわけで、今回は海外WEBデザインギャラリーまとめに続きまして続編的に書いてみようかなと、前回
いまさら聞けないCSS font-familyのまとめ
CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 認識誤りがありましたらどこかでつぶやいてください。 １．font-familyとは？ 通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「フォントファミリー」といいます。 「Arial」「Vernada」「ヒラギノ角ゴPro W3」「ＭＳ Ｐゴシック」などがフォントファミリー名です。 このフォントファミリー名を指定するためのプロパティが「font-family」です。 サンプル body { font-family: Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン設計の勉強になる、海外デザイナーによる有名サイトのリデザイン案
Loading...