Web制作会社に飛び込んだ新入社員にとりあえず読ませたいスライドWebデザインのセオリーを学ぼう / Webデザインのウソ・ホント ～ Web らしく... / コンテンツで改善する UI デザインの極意他...全21件
新しいものを制作できる予感！垂直・水平のリズムを大切にしたレイアウトを組み立てるフレームワーク -xy.css
Documentation -xy.css Step 1: ダウンロード xy.cssを下記ページからダウンロードします。 ダウンロード -xy.css Step 2: 水平のグリッド設計 HTMLは非常にシンプルで、classなど余計なものは一切ありません。 <header></header> <article></article> <aside></aside> <footer></footer> 天地にヘッダとフッタ、コンテンツとサイドバーを2カラム水平に配置します。 header, footer { width: 100%; } article { width: 66.6667%; float: left; } aside { width: 30.769231%; float: right; } Step 3: 垂直のグリッド設計 articleとaside内に、見出しとパラグラフ
スマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
ウェブサイト設計の時に役立つ７つのテクニック／【その5】リンクの装飾と配置 (ユーザビリティ実践メモ)
ウェブサイト作成時に役立つ7つのテクニック、第5回のテーマは「リンクの装飾と配置」です。ユーザにとって使いやすいリンクの装飾や配置のサイトを作成するためのポイントをお伝えします。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 ←今回のテーマ 目線の操作 他サイトでの慣習 ウェブサイトでは、ユーザがリンクを見つけることができなければどんなにユーザの関心を引くページやコンテンツを用意しても、まったく見られないまま終わってしまう危険性があります。 そこで、今回は「リンクの装飾と配置」をテーマに、ユーザがスムーズにページ間を遷移することが可能な、回遊性の高いサイトを設計するためのポイントをお伝えします。 まずはリンクの装飾について、テキストリンクとボタンリンク、それぞれのポイントを順に解説していきます。 １. テキストリンクの装飾 テキストリンクは青字下線で表すことによ
ホスティング プロバイダとウェブマスターの皆様へ
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
twihelp.me
twihelp.me 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
2011年4月第2週号 1位は、ECサイトの決済画面のガイドライン、気になるネタは、iPhoneやAndroid端末で「tilt」とググると？ | gihyo.jp
週刊Webテク通信 2011年4月第2週号1位は、ECサイトの決済画面のガイドライン、気になるネタは、iPhoneやAndroid端末で「tilt」とググると？ ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年4月4日～2011年4月10日の間に見つけた記事のベスト5です。 1. Fundamental Guidelines Of E-Commerce Checkout Design - Smashing Magazinehttp://www.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/ ECサイトのチェックアウトのプロセスに関する基本的なガイドラインです。
Patternry Blog
Farewell from Patternry Dear Customers, After 9 years of building and supporting Patternry, we have decided to shut down the service. We have spent a lot of time and effort during the years to make Patternry fit our customers needs. However, for the last few years we haven’t had the time and dedication Patternry would have required. Web technologies come and go very fast and large redesign would h
解析しやすいは作れる！ | dIG iT
dIG iT Digital Marketingに関する様々なテーマで発信するブログ。 若干ペースが落ちているものの、１本は濃い内容で書いてみてます！ 解析しやすいサイトは作れます。制作時にいくつかのポイントを意識するだけで、その解析のしやすさは飛躍的にあがってきます。 逆に言えば、アクションにつなげやすいサイトは、解析のしやすいサイトであり、それは結果としてサイト構造がしっかりしたものとも言えます。 ということで、サイトを作っていく上で＜解析視点から＞押さえておくと良いポイントをご紹介したいと思います。 USで起きている変化 まずは最初にUSで起きている変化について少し触れてみたいと思います。個々数年、USの上位に評価されているコマースサイトのTOPページなどを見ていくと、実際に＜解析しやすい＞が意識的に作られていると感じています。 下記のキャプチャはBest BuyのTOPページを現在
最適化をする前にやるべき３つのこと | dIG iT
dIG iT Digital Marketingに関する様々なテーマで発信するブログ。 若干ペースが落ちているものの、１本は濃い内容で書いてみてます！ 最適化をやみくもに進めていては効率も悪く、場合によっては思っても見ない方向ばかりに目がいってしまい、そもそもの本題を見失ってしまう可能性もあります。 運用をする、課題となっている箇所を探す、テストをするなどサイトを最適化するためにも様々なタスクがあります。これらを行っていくにあたり、事前に行っておくと良いことがあったりします。というこでそれらを３つに分けてみたいと思います。 KBR（サイトの戦略）を明確にする。 ビジネスのゴール、サイトの役割など大きな部分については、サイトに関わっていれば意識していることが多くあります。しかし、実際の運用となるとサイトの役割は自分の行っている運用とは少し離れてしまっていることもあります。 そこでこれを埋める
ハイレベルサイトマップの作り方 | dIG iT
dIG iT Digital Marketingに関する様々なテーマで発信するブログ。 若干ペースが落ちているものの、１本は濃い内容で書いてみてます！ 2011年あけました。今年も宜しくお願いいたします。はい。ということで今回はハイレベルサイトマップについて触れてみたいと思います。 ハイレベルサイトマップは解析とは関係ないようにも感じるかもしれませんが、自分はクライアントのサイトを分析する際は必ずといっていいほど作るものです。というかこれがないと分析の軸がブレやすくなってしまいます。 ただ、このハイレベルサイトマップは慣れていないとちょっと難しい部分もあるので、そもそも何よってところから、作り方まで触れていきたいと思います。 ハイレベルサイトマップとは？ そもそも、ハイレベルサイトマップって？について少し。ハイレベルサイトマップとは通常の詳細なサイトマップとは違い、サイト全体の大枠を知るた
「ホームページを作る人のネタ帳」さんのリデザインをしました
2013年3月23日 Webサイト制作, Webデザイン Webデザインには大きく分けて2種類あります。新規作成と、既存のサイトのリデザインです。今回「ホームページを作る人のネタ帳」さんのリデザインをお手伝いさせて頂きました！リデザインにあたり、改善点やリデザインの流れをケーススタディーとして公開してみようと思います。 ↑私が10年以上利用している会計ソフト！ 打ち合わせ リデザインにあたり、まずは入念な打ち合わせをします。Yamadaさんからの要望は、 とにかく読みやすく、スッキリと 差し色にピンクを使いたい jQueryを使った何か仕掛けが欲しい の三点。文章主体であるこちらのブログでは読みやすさが命。スッキリとしたデザインを第一にしてほしいとのこと。また、「ユーザーに数秒でもいいので楽しんでもらいたい」という思いから、何か仕掛けを、と依頼されました。Yamadaさんらしい遊び心ですね
[SEO]すぐにできる、サイトの内部リンクを改善する5つの方法
SEOで重要な要素の一つに、内部リンクがあります。これはあなた自身のサイトの内部リンクを適切にすることで、サイトをSEOの面で改善・強化します。 すぐに作業できる内部リンクを改善する5つの方法を紹介します。 5 Fast Tips to Improve Internal Links [ad#ad-2] 下記は各ポイントを意訳したものです。 1. キーワードを使う 2. 絶対パスを使う 3. パフォーマンスの改善 4. テキストのメニューを使う 5. リンクの整理整頓 1. キーワードを使う リンクのテキスト（アンカーテキスト）には、キーワードを含めるようにします。 例えば、「内部リンク」というキーワードに注目する場合、そのページへリンクを貼る場合はアンカーテキストに「内部リンクの説明」とキーワードを含めるようにします。これにより、検索エンジンのスパイダーはリンク先のページが何についてのもの
コンバージョン率を著しく下げるフォームの入力項目ワースト3など10+2記事（海外&国内SEO情報） | 海外&国内SEO情報ウォッチ
コンバージョン率を著しく下げるフォームの入力項目ワースト3 （HubSpot Blog）米ハブスポットは、40,000人のユーザーがアクセスしたランディングページを分析して、コンバージョンを下げる傾向にあるフォームの入力項目を調べ上げた。ワースト3に挙げられたのは、以下の入力項目だ。 年齢電話番号住所調査対象のページは、見込み客情報を取得する目的でフォームが設置されていたと思われる（オンラインショッピングで住所を入力させないわけにはいかないだろう）。住所は市町村だけではなく番地まで尋ねるとさらにコンバージョンが下がったとのことだ。米国での調査になるが、日本でも当てはまりそうに思える。 絶対に必須でないなら、これらの3項目は入力項目から外していおいたほうがよさそうだ。 日本語で読めるSEO/SEM情報Yahoo!サイトエクスプローラーが“こっそり”終了へ （Yahoo!検索サイトエクスプロー
プロジェクトメンバーが幸せになれるワイヤーフレームの作り方 : LINE Corporation ディレクターブログ
こんにちは、livedoor Blog 担当の飯田です。 ちょうど新機能のワイヤーフレームを描いている最中だったので、今回は正解があるようで無いディレクターのメイン業務の一つ、ワイヤーフレームについて自分なりにどう考えて作っているかを簡単にまとめてみました。 特にワイヤーフレームをこれから初めて作ってみるという人の参考になればと。 ワイヤーフレームって？ ウェブサイトを構成する要素・動作をまとめた資料になります。構成書・モック・スケルトン・青写真と呼び方は人それぞれです。 ということで、実際以下の感じでワイヤーフレームを作っていきます。 とりあえず紙に描く 頭の中で考えていることをとにかく裏紙などを利用して紙に描いてみます。ワイヤーフレームと聞いてデジタルなイメージがありますが、こうした構想やアイデアベースの状態のときは、たくさん手を頭を動かして思いを出し切った方が整理がしやすくなります。
[CSS]一つの要素に背景やボーダーをマルチプルに配置する実用的なテクニック
CSS3のマルチプルバックグランドを使用せずに、CSS2.1の擬似要素を使用して一つの要素に複数の背景やボーダーを配置するテクニックを紹介します。 Multiple Backgrounds and Borders with CSS 2.1 CSS3のサポートは必要なく、対応ブラウザはCSS2.1の擬似要素をサポートするIE8+, Fx3.5+, Safari 4+, Chrome 4+, Opera 10+となっています。 実装の仕組みは上記の画像のように、擬似要素の「:before」と「:after」を利用したもので、複数の背景やボーダーを配置することで面白い効果が得られます。 下記にその実用的で面白い効果をもったデモを紹介します。 マルチプル バックグランド デモ：Multiple Backgrounds with CSS 2.1 CSSファイル：backgrounds.css
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
チートWeb | これだけ読めば分かるWeb制作者向けニュース
http://designaholic.cc/2011/03/webweb21.html
