Build a better future. 育てたいのは、企業の未来です。 時代を読み、社会の信頼を集めて企業価値をじっくり育てていく。 ウェブにはそれを可能にするチカラがあります。 私たちはウェブのプロ集団として、企業の未来をともに描きます。 Build a better future. 育てたいのは、 企業の未来です。 時代を読み、社会の信頼を集めて企業価値をじっくり育てていく。 ウェブにはそれを可能にするチカラがあります。 私たちはウェブのプロ集団として、企業の未来をともに描きます。
![ウェブ戦略・コンサルティング UNIONNET Inc.(株式会社ユニオンネット)](https://cdn-ak-scissors.b.st-hatena.com/image/square/520f5722dd2f78c75c7c71f1eb3aeaa4abcc3e13/height=288;version=1;width=512/https%3A%2F%2Fwww.unionnet.jp%2Fimg%2Fmain%2Fmain_visual01.jpg)
DeNA 社内勉強会に呼んでいただいて、お話させていただきました。 Reviewに登場していただいてるサービスはこちらです。 動く小説投稿サイト Denkinovel by @katryo さん http://denkinovel.com/ ご協力ありがとうございました( ˘ω˘)
ウェブサイトをデザインするときに大事な色。サイトの目的やイメージなど、色を決める要素にはいろいろなものがありますが、見やすさ、という大事な要素を忘れてはいけません。では、見やすい色の組み合わせって具体的にはどうやって決めるのでしょうか。参考になるのは「コントラスト比」。アクセシビリティのJIS(JIS X 8341-3:2010)では、少なくとも4.5:1以上のコントラスト比を要求しています。具体的にどのくらいの色がこの達成基準をクリアしているのか調べてみました。 調査のきっかけ普段からアクセシビリティにかかわっていて、また弱視の視覚障害を持っている私は、以前から「前景色と背景色のコントラスト比と実際の見やすさにはギャップがあるよな」と感覚的には感じていました。きっかけはFlash Playerのアップデートを促すダイアログの前景色と背景色がとっても見づらいことでした。 このギャップを感じ
作成:2014/06/9 Web制作 > トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビューで使いたいエフェクト 1.ロングシャドウ 2.ポリゴン 3.ラージフォトスタイル 4.ブラーエフェクト 5.フルスクリーン動画 6.画像シーケンス 脱ビットマップ画像 7.SVG 8.Webフォントを円で囲む 配色・フォント 9.配色(フラットデザイン) 10.タイポグラフィ(フラットデザイン) 11.フォント(フラットデザイン) 効果 12.Infinite Scroll(無限スク
ある記事 によれば、レスポンシブ Web デザインを採用するサイトの 72% が、デスクトップとモバイルに同じリソースが使われているそうです。またそれらリソースの 60% 以上が画像 という統計や、モバイル用に画像を最適化すれば、データ量を 72.2% 削減できる という調査結果もあります。 ということで、レスポンシブ画像のことを調べていていましたが、その技術進化というか、紆余曲折も含めて色々とある様です。 最新技術を素早く取り入れることはもちろん大事ですが、特に過渡期においては、変化に強いサイトを作るためにも技術の先行きを見極めることが重要です。そこでタイトルのような視点で、これまでの経緯をつらつらと辿ってみました。 自分としてのテーマは、「じゃあ、今、どうするか?」だったのですが…。読んで下さる方の何かに役立つかどうかは甚だ心もとない記事です。 ちなみに今回記事で取り上げた話題について
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
Webデザインの現在のトレンドの多くは2013年頃から浸透しはじめ、さまざまな形に進化し続けています。そんなWebデザインのトレンドを実際に効果的に使用しているサイトともに紹介している無料のE-Bookを紹介します。 2014年も残り半年ちょい、早いものですね。 Web Design Book of Trend 2013-2014 このE-Bookとは別に、トレンドの流れをさまざまな切り口からチェックしたい人は下記の記事も参考にしてみてください。 2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ E-Bookは無料で、全187ページオールカラーのPDFです。各トレンドごとに説明と、実例が15サイトくらい掲載されています。 下記に各トレンドと中身をざっくり紹介します。 1. The Era of Content コンテンツの時代 ウェブサイトのレイア
「海外ではABテストが盛ん」という言葉を耳にし、その内容が気にはなるものの、実際にそのノウハウや事例を外国語で仕入れるのは一手間だと、先送りにしてしまう人も多いのではないでしょうか。(かくいう私も「先送り」の日本代表です。) そんな皆様の一手間を解消すべく、海外のABテストの事例とその要点を日本語でまとめてみました。 普段から気になっている海外の事例を、どうぞサクッと日本語で仕入れちゃってください。 ※本記事は2014年5月19日に公開された記事をLISKUL編集部にて再編集したものです。 グローバルナビゲーションの削除とフォームの変形でCVR336%http://unbounce.com/a-b-testing/how-a-single-a-b-test-increased-conversions/ ・オリジナルページの特徴は、上部に分厚いグローバルナビが配置されていることと、右カラムに
日記調査:長期間のユーザー行動と体験の理解 ニールセン博士のAlertbox 8月9日 読了までに約15分 参加者は日々の活動をその都度記録し、リアルタイムのユーザーの行動やニーズについてコンテキストに基づいた知見を提供する。 このサイトについて UXリサーチや市場調査の手法やコツ、結果や知見を紹介しています。 詳細 新記事公開は、Twitter・Facebook・RSSで随時、メルマガで月1回通知します。 Twitter Facebook RSS メルマガ YouTube、始めました 黒須教授のユーザ工学講義 7月25日 読了までに約5分 2024年5月にYouTubeチャンネルを開設し、そこで「黒須のユーザ工学入門」を連載することにした。講演や講義とは違ってもっとオープンにして、広い範囲の人たちに話を届けたいという気持ちがあったのだ。
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー(ディレクター、Web担当者、エンジニアなど)向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1:ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
2024年最新でおすすめの宅配野菜を10選ご紹介します。人気の宅配野菜20商品から3つの基本項目を基に比較して解説しています。 これからどの宅配野菜を購入しようか迷っている方の手助けになれば幸いです。
Estelle is a consulting web developer, trainer, author and speaker. She speaks and leads workshops on web development all over the world. Her books have been translated into over 14 languages. She's been coding CSS, HTML, and JavaScript since 1999. Standardista Twitter Personal Twitter Web Dev Tips Conference Talks My Books Best way to contact me is via Twitter, but you can email me at firstName a
CSS3で追加された新しいサイズ指定方法、rem(読み方はルートエム)。 emや%での指定方法は相対指定の為、子要素は複利計算されてしまいますが、remで指定するとroot要素(html要素)のフォントサイズを継承するので、階層が深くなってもフォントサイズが変化しないというメリットがあります。 remは、これから先のWeb制作、特にレスポンシブWebデザインには欠かせない存在となってきます。 px(ピクセル)→rem(ルートエム)のサイズ表 2px 0.142857143rem 5px 0.357142857rem 6px 0.428571429rem 8px 0.571428571rem 10px 0.714285714rem 11px 0.785714286rem 12px 0.857142857rem 13px 0.928571429rem 14px 1rem 15px 0.0714
LPO研究所の鳥居です。 「イメージしてたデザインと全然違う」 「これじゃ売れる気がしないんだけど」 「ちゃんと頭使って考えてんの?」 突然ですが、あなたは日常的にこんなことを言われていませんか? 今の職場でWebデザイナーとして働きはじめてはや7年。私は、今では後輩デザイナーの育成も行う立場なのですが、新人が先程のようなセリフを言われるのを毎日のように目にしています。 無論、私自身も新人の頃はこっぴどくやられました。 今なら分かることですが、これは 新人Webデザイナーが共通して「取るべきコミュニケーション」を取っていないから起こるトラブル なのです。 あなたは今、デザイン制作におけるコミュニケーションに自信を持てていますか? もしかすると今この記事を読んでいるあなたは「Webデザイナー」ではなく、クライアントから要望を聞く「営業」や「ディレクター」の立場かもしれません。 しかし基本は同
CreditThis article is translated with permission of Paul Adams. You can find original article at The Dribbblisation of Design.本記事はPaul Adams氏の了承を得て翻訳された記事です。 原文はThe Dribbblisation of Designにて掲載されています。 これらの天気アプリのうち1つだけが本質的な問題の解決をしようとしている。 プロダクト/インタラクションデザインコミュニティでは分岐が起ころうとしている。Ryan Singer氏やJulie Zhuo氏が書くような素晴らしい記事達が我々の生み出すものをよりよくし続けている一方で、多くの人がDribbbleに自身の作品を投稿し、議論をしている。それらを集約した結果は我々の生み出すものを後退させて
「技術的負債」という話が、はてな村大字テクノロジー周辺を賑わせている。 技術的負債という(非エンジニアにとっての)隠しパラメータが生産性100倍を起こす- mizchi’s blog 出来る人からみたら超絶無駄なレビューとテストの存在意義 – novtan別館 プログラマの生産性と報酬 – アスペ日記 あたりがにぎわっているエリアだろうか。 私はエンジニアではないから全ての話の理解はできないんだけど。『見えづらい技術的負債が発生し積み重なった結果、誰かが尻ぬぐいをしている』という状況はwebデザイン、特にUIデザインの現場でも同じだなーと思ってる。 糞コードならぬ糞UIデザイン。webディレクター、webデザイナー、コーダー、フロントエンジニア皆が想定しえない余計な工数をとられてしまうUIデザイン。そしてえてして「なんでそんなに工数かかるの?」と言われ、挙句ちゃんと状況説明を上司に怠ると「
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く