ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
CSSで括弧を表現したサンプル - NxWorld
丸括弧（） 頭から微妙な見栄えですが、**丸括弧（）**を表現してみたものです。 HTMLとCSSはそれぞれ下記のようになっており、擬似要素を使って生成したものにborder-radiusを指定します。 <div class="parenthesis"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p> </div> .parenthesis { position: relative; width: 500px; padding: 15px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .parenthesis::before, .parenthesis::after { position: absolute; top:
“UX王子”が語る、KPIではなく人間中心設計（HCD）の観点から見るUXデザイン | 【レポート】Web担当者Forumミーティング 2014 Autumn
アクセス解析、マルチデバイス対応、モバイルファースト、A/Bテストなどを行うことでとりあえず満足し、自社のWebサイトはUXデザインを実践できていると考えてしまう企業は多い。しかし、それで本当にユーザーが喜ぶ体験を提供できていると言えるだろうか、“UX王子”こと千葉工業大学の安藤氏が、自らの行った人間中心設計やUXの研究をもとに、真にユーザーの体験を考えたサービス設計について解説する。 人間中心設計とKPI中心設計の違い Web担当者Forumミーティング 2014 秋の最後の基調講演に登壇した千葉工業大学 工学部デザイン科学科 准教授の安藤昌也氏は「御社のWebサイトにUXは必要？ UXってウチのサイトに関係あるの？ ～UX王子の語るUX論」と題して、今の世の中で主流なKPI中心のサービス設計ではなく、真にユーザーを考えたUXデザインを行っていくために必要な視点について講演した。 安藤氏
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材（PSD, AI, Sketch） -UI Tiles
最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基本的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles UI TILES: WEBSITE FLOWCHARTS ダウンロードできる素材のフォーマットは、4種類。 .psd（72種類のレイアウトとチャート） .ai（72種類のレイアウトとチャート） .sketch（72種類のレイアウトとチャート） .png（72種類の各レイアウト） 各フォーマットにはそれぞれ72種類のレイアウトとチャートが揃っており、ワイヤフレームやフローチャートやサイトマップとして利用できます。
画像を分割もしくは合体させてパフォーマンスは本当に変化するのか? - Webパフォーマンスについて
これは、HTML5 Advent Calendar 2014の7日目のエントリーとして書いております。 2008年4月1日に初版が発行された、オライリー・ジャパンの「ハイパフォーマンスWebサイト」を未だに参考にされている方は多いと思います。 ウェブページ内で、背景やボタン、ナビゲーションバー、リンクなどで多数の画像を使う場合は、CSSスプライトを使うのがエレガントな解決策です。そうすることで、マークアップが整理され、扱うべき画像の数も減り、レスポンスも高速になります。 ― 「ハイパフォーマンスWebサイト 高速サイトを実現する14のルール」 Steve Souders著 その部分を参照されてか、時折、「CSSスプライトを使うことで、HTTPリクエスト数が削減されて、高速化に繋がる」と書かれている方をお見受けします。 しかし、それは本当なのでしょうか? そこで、今回、本当に効果があるのかど
WordPressを巡る理想と現実、あるいは誤解
ブコメでもすでに色々言われていて、自分のFacebookのタイムラインでも軒並み言及されているので、触れたくない理由は色々あるのだが、CMSで仕事をしている以上、反応しとかないといかんかなと思って筆を取る。そう、この件だ。 WordPressで「ささっと作る」で請けれなくなってる現状。 まとめると、WordPressは作り手にとっても楽に作れて、ウェブサイトを持ちたい人にとってもイニシャルコスト・ランニングコストともに安く済ませられる、みんながハッピーなツールだったはずが、そうではなくなってきた、と言う話。そうではなくなってきた根拠は何かと言うと、セキュリティ対応と管理画面の使いにくさ、カスタマイズ範囲の肥大化、の３点があるようだ。 セキュリティ対応は必要ですし、ランニングコストもかかります セキュリティ対応については、WordPressの導入によく使ってきたロリポップサーバーでWordP
WordPressで「ささっと作る」で請けれなくなってる現状。 | バニデザノート
WordPress案件、前からいろいろ請けさせてもらっているんですが だんだん「簡単にー」っていう範囲から外れてきていて どんどん予算もかさばっている現状があります。私なりの把握していることを書いてみます。 WordPressが広まりだした頃から、アタックを受けやすくなっているWordPress。 WordPressが動いて安くて便利なロリポップでのアクセス制限のハードルが高いです。 一時期特にロリポップがやっていた「簡単インストール」でやっていたロリポップ加工版のやつに穴があった（？）か何かで、ファイルアップロードしているものにも影響が出てくるように。 ログインのアドレスを変えてみたり、サーバーに関係なくアタックへの対処法っていろいろあったんですが、どんどん.htaccess制限されちゃって。 個別IPアドレスを通す設定にしてるものだから、「IPアドレスって何？」って人にはすごいハードル
和風デザインWebサイトの制作ポイントや素材を実例とともにまとめました
2017年7月14日 Webデザイン, ダウンロード, 色彩 今月はじめに初めて箱根旅行で洗練された美しい温泉宿に宿泊して以来、「和」な雰囲気やデザインの素晴らしさに魅了されたManaです。伝統的な配色や配置、書体等、見ていて飽きの来ない魅力がありますよね！和風デザインには大きく分けて4つの特徴があります。それぞれの特徴を理解し、うまくデザインに反映していきましょう！ ↑私が10年以上利用している会計ソフト！ 1. 配色 「和風デザイン」と聞いて思いつくのはどんな色でしょうか？おそらくビビッドなピンクや透き通るような水色ではなく、わさびやからし、えんじのような、少しくすんだ色合いを思いつく人が多いかと思います。日本には伝統的な色や配色というものが存在し、それらを上手に使うことでグッと和の雰囲気漂うデザインに近づきます。 伝統色 日本の伝統色 和色大辞典では日本の伝統色をカラーコードとともに
そのデザインには理由がある！デザインの原則をWebデザインにどのように取り入れるのかのチュートリアル
デザインの原則をWebデザインにどのように取り入れるのか、それを言葉に表すのはなかなか難しいことです。デザインの原則を理解して手を動かす、またクライアントにデザインの説明を行うといったこともあるでしょう。 デザインにはなぜそうなるのかという理由があります。 実際のWebページのデザインを元に、デザインで大切な原則とそれらをWebデザインにどのように取り入れるのかを紹介します。 7 Undeniable Design Principles You Can't Ignore 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 photoshopvip.netというブログにも同記事の翻訳がありますが、あちらは無断翻訳・画像の使用も無断であると、元記事の作者から連絡を受けています。 使用するデザイン 1. Hierarchy -階層 2. Rep
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
スクロールやクリックした際に、おおっ！と思わせるクリエイティブな7つのエフェクトがかっこいいっ！
ユーザーがページを表示し、スクロールやボタンをクリックした際に、おおっ！と思わせるクリエイティブなエフェクトを7つ紹介します。 Inspiration for article intro effects 7つのエフェクトをアニメーションgifにしてみました。 ページはフルスクリーンサイズの画像が最初に表示され、そこをスクロールボタンクリックでさまざまなエフェクトがおきます。派手すぎず、センスあるかっこいいエフェクトばかりです！ 各エフェクトのソースは上記ページからまとめてダウンロードできます。
Webサイトがあるアプリなら必須対応になりそうな、App Linksを使ってみた - Lebe Inc. Blog
2014年4月20日、FacebookがF8カンファレンスでApp Linksというアプリ間連携のための新しい仕組みを発表しました。App Linksではこの仕組みをオープンにし、全ての開発者が利用できることを目標としています。 FacebookアプリからTumblrの記事を開こうとしたらアクションシートに「Tumblrで開く」があります。これがApp Linksで実装できます。 簡単な機能紹介はニュースサイトから引用します。 アプリ開発者は、アプリのコンテンツに数行のコードを追加することでApp Linkメタデータをパブリッシュできる。このコンテンツにリンクするアプリはメタデータを利用してアプリに“deep-link”できるようになる。例えば映画紹介アプリ内に映画のチケット販売アプリへのリンクをApp Linksで入れておけば、ユーザーは映画紹介アプリからチケット販売アプリを直接開いてチ
単なる流行りじゃない？！水戸黄門型レイアウトが定番化した理由を考えてみた
定番っていいですよね。わずかな退屈さはありつつも、安心できます。 スニーカーならオールスター、スマホならiPhone、ビールならスーパードライみたいな。 Webサイトにも2012年ごろから急増し、現在では定番化したレイアウトパターンがあります。 ちなみにこのパターン▼ その代表例、Evernoteのサイト▼ http://evernote.com/intl/jp/ このパターンで商材となっているものの多くが、物理的なプロダクツではなくクラウドなど新しめのウェブサービスで、皆さんも頻繁に遭遇するのではないでしょうか。 グリッドレイアウトの亜種ともいうべきこれに正式名称があるのかわからないのですが、とりあえず僕は心の中で水戸黄門型と呼んでいます。時代劇の定番だし。 ※あくまでイメージです 定番化して今もなお増え続けている理由をちょっと考えてみました。 多分この辺じゃないかなーと A. 整然とし
msto.jp - it転職 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
レスポンシブWebデザインで成功するUI／UXのポイント5つ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
レスポンシブWebデザインでサイト構築をする際に、今までのWeb構築で「当たり前」や「こうすべき」と思っていた感覚とは少し異なった設計でサイトを構築しなければなりません。 これまでのWebにおけるUI／UX これまで、PCのブラウザをメインにネットをする層が中心だった時代では、マウス操作が基本になっていました。 当たり前ですが画面上のマウスを操作して、クリックをしたり、ドラッグ・アンド・ドロップで対象を動かしたりする動作がメインになります。 UI／UXで言えば、ボタンをクリックするにしても、マウスでカーソルを移動させればボタンの色が変わったり、カーソルの矢印が人の指に変わったりするマウスオーバーアクションと言われるものです。 テキストリンクであれば、カーソルを対象に持って行くと、テキスト下線が消え、カラーが変わるなどの変化が当たり前になっていました。すべてはマウスでの移動させることが中心に
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
要素の横幅と高さの比率を保つ | 集の一期一会
Effective web performance tuning for smartphone
無料でしかも高品質！1ページで構成されたサイトを作るためのHTML5/CSS3のテンプレートのまとめ | コリス
