デザイナーだけでなくエンジニアもブックマークしておくべきUI/UXの情報を発信するメディア・ブログ6選｜TechClips[テッククリップス]
デザイナーにとっては、聞かない日がないほどトレンドとなっている「UI/UX」という言葉。もはやデザイナーに限らずエンジニアにとっても、UI/UXの概念を理解していることが基本のスキルセットとして必要とされる傾向もあり、これまでのような“モノ”から“コト”を重視する考えが強まっているように思います。 さて、本記事ではそうしたUI/UXの情報を余すことなく発信する国内メディアやブログを紹介。デザイナーはもちろん、エンジニアの方もUI/UXの理解を深める情報源として活用してみてはいかがでしょうか。 UI/UXとは 改めてUI/UXについて簡単にご紹介すると、それぞれの「UI」と「UX」では考え方が違うことに注意しましょう。はじめにUXとは、「ユーザーエクスペリエンス」の略で、いわゆる“体験”を指します。 例えば、「ECサイトで思いがけない好みの商品を見つけ、購入できたときの喜び。」つまり、利用者
![デザイナーだけでなくエンジニアもブックマークしておくべきUI/UXの情報を発信するメディア・ブログ6選｜TechClips[テッククリップス]](https://cdn-ak-scissors.b.st-hatena.com/image/square/442521c6f78a52c5edefd0d08aa7ebf16b21c1ca/height=288;version=1;width=512/https%3A%2F%2Fobject-storage.tyo1.conoha.io%2Fv1%2Fnc_261159609ad84809af5afcb9e5f56abb%2Ftechclips%2Fimages%2F122%2Fimage.png)
ノンデザイナーこそ知っておきたい！デザインでセンスより大切な心理学のルール
デザインに一番大事なのはセンスだと思っていませんか？ ディレクターやエンジニアにも役立つ、Webデザインで使える心理学のルールとは？ ミズーリ工科大学の研究によると、Webサイトに対するユーザーの第一印象の94%以上はデザイン関連の要素で決まっているようです。また、なんと88%ものユーザーが、ユーザビリティの問題があったWebサイトを再び使わないと決めることも分かっています。 しかし、Webサイトのデザインには高度な技術力や美的感覚が必要だと思うのなら、考え方を変えてください。美的感覚は確かに重要ですが（なんといってももう2016年なのですから！）、Webサイトに必要なのは美的感覚だけではありません。実際、一番大事なことでさえありません。一番大事なのはユーザビリティであり、もっと実入りの多いWebサイトを確実に作るには、心理学のルールを使ってWebサイトをデザインしなければなりません。 ル
Budou: 日本語のための自動折り返し制御ツール
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
アプリ・ゲーム製作者必見！ 煩雑なライセンス契約が不要のモリサワのアプリ・ゲーム用フォント製品
乱立するアプリやゲームに、ユーザビリティの良さを保ちながら強い個性を持たせるには、優れたフォントの存在が欠かせません。 ところが、フォントの使用許諾の契約は思った以上に煩雑で手間がかかるものです。また、アプリやゲーム内の契約は完了していたけれど、いざ発表という段に至って「販促用ツールを作るのに別のライセンスが要るって知らなかったー!!」と右往左往した経験のある人は意外に多いのではないでしょうか。 そんなアプリ・ゲーム製作者にとって使い勝手のいいフォントパッケージ製品が、この度フォントの老舗モリサワから10/21に発売開始として発表されました。 「MORISAWA App Tools ONE」は、これまで個別の契約が必要だったアプリへの組込みと、アプリのプロモーション用デジタルコンテンツの制作に必要な書体を、好きなだけ利用できる新しいフォント製品です。モリサワフォントを中心とする341書体の
Webサイトのフッターにサイトマップを設置すべき理由
何年か前は、フッターの部分にサイトマップへのリンクを置くのが一般的でしたが、近年ではフッター自体が、サイトマップとして新たに使われるようになりました。 サイトマップは、サイト内のすべてのリンクを１ページ内に記載したものです。しかし今では、フッターを正しくデザインすれば、ほとんどのサイトにおいては、必要ないページとなっています（XMLのサイトマップは、SEOにおいては未だに不可欠ですが）。 伝統的なフッター さかのぼってみると、フッター自体がユーサビリティの要素として、重要視されることはまれでした。伝統的なフッターとはサイト管理に関する一連のリンクと、コピーライトの情報が載せられているようなものを指しますが、研究によると、ほとんどのサイトが伝統的なフッターを使っていたそうです。当時、大半のユーザーはページの一番下にあるフッターの部分は使わないという思い込みがありました。 そんな伝統的なフッタ
いまさら聞けないフラットデザインの真実。Webデザインは、デザインとエンジニアがコラボして進化する。
Webデザインの主流となったフラットデザイン。 「立体感がない」、「オシャレだ」、「作り込まれていない？」、「シンプル イズ ベスト！」などイメージは様々ですが、このデザインの台頭には、必然的な理由がありました。 この記事では、フラットデザインとは何か、なぜフラットデザインなのかを説明します。 フラットデザインとは？ フラットデザインは、読んで字のごとく立体感や質感などの演出が少ないエレメントを使ったデザインです。 質感を出すテクスチャや立体的な効果を出すシャドーなどを用いず、色や形などによりシンプルなサイン、シグナルを用いて構成します。 フラットデザインは、凹凸のありなしだけでなく、スッキリとした印象を与えるミニマルデザインとも考えられます。 ミニマルデザインは、ミニマリズムを基本としたアートや音楽、ファッションシーンでも活用されている思想で、一般的には最小限のエレメントで表現したシンプ
Webで仕事をする人全員に知っておいてほしい文字詰め・カーニングの基礎知識 | 株式会社ZINE
株式会社ZINEの仁田坂です。編集者ですがデザインするのが好きです。 自己主張しすぎな圧倒的アイキャッチで失礼しました。今日はフォントと文字詰めの話をします。ぼくは雑誌編集者として数年働いた後にWebメディアをつくり起業、みたいな感じで働いてきたんですけれども、編集もデザインけっこう似ている部分が大きいと思っています。文字で読者に伝えるのか、視覚情報でユーザに訴えかけるのか。 結局のところ同じだよなあ、と思ったりします。編集もデザインも一緒くたにして考えたほうが都合いいことが多いです。 で、けっこうWebメディア見てると残念なデザイン、多いんですよね。 Webフォントでタイトル設定してるメディアは気にならないんですけれども、アイキャッチ見ると最悪……みたいなの多い。以前GitHubでアイキャッチ用のテンプレートを公開したもんだから、形だけ真似してデザインがてんでなってないメディアが増えまし
google-cloud-python=0.19.0から^0.20.0にアップグレードできない問題の解決法 - 備忘録
問題 pip3 install --upgrade google-cloudgoogle-cloud==0.19.0の環境から^0.20.0へアップグレードしようとすると ImportError: cannot import name 'datastore'のようにImportErrorが発生するようになる． 解決法 github.com pip3 uninstall -y google-cloud-bigquery google-cloud-bigtable google-cloud-core google-cloud-datastore google-cloud-dns google-cloud-error-reporting google-cloud-language google-cloud-logging google-cloud-monitoring google-cloud-
Chainerで始めるニューラルネットワーク - Qiita
Chainerは、Preferred Networksが開発したニューラルネットワークを実装するためのライブラリです。その特徴としては、以下のような点があります(ホームページより)。 高速: CUDAをサポートし、GPUを利用した高速な計算が可能 柔軟: 柔軟な記法により、畳み込み、リカレントなど、様々なタイプのニューラルネットを実装可能 直観的: ネットワーク構成を直観的に記述できる 個人的には、さらに一つ「インストールが簡単」というのも挙げたいと思います。 ディープラーニング系のフレームワークはどれもインストールが面倒なものが多いのですが、Chainerは依存ライブラリが少なく簡単に導入・・・できたんですが、1.5.0からCythonを使うようになりちょっと手間になりました。インストール方法については以下をご参照ください。 Mac Windows AWS 公式インストール情報 また、C
はてなブログをマテリアルデザイン風にカスタマイズしました。デザインのノウハウからCSSの編集迄詳しく解説!! - nasust life blog
こんにちはnasustです。このブログをGoogleのマテリアルデザイン風にカスタマイズしました。 今回の記事では、何故マテリアルデザインを採用したのか、デザインのポイント、そして実現する為のCSSの編集内容を詳しく解説します。 ちなみに、メインプログラマーでUIのデザインは、それなりにできる程度の経験です。 マテリアルデザインの採用 マテリアルデザインを採用したのは、Googleのマテリアルデザインの資料を見て衝動的にやってみてええ!! となった訳ですが、もちろんそれなりに考えがあります。 Windows8の頃からフラットデザインが流行っていましたが、ハッキリ言ってその頃のWEBサイトは操作し難いですね。何故かというと、全てフラットなので重要なボタンやリンクなど、全て等価に見えて目立たない為に、操作の仕方が分からないですよ。それから暫くしてAppleのMacもフラットデザインを採用しまし
流行なんて関係ない！いつでも使える黄金ウェブレイアウトUIパターン12個まとめ
海外サイトUXPin Studioで公開された「Web Layout Best Practices: 12 Timeless UI Patterns Analyzed」の著者 Jerry Cao より許可をもらい、翻訳転載しています。 ウェブサイトを訪れるユーザーの多くは、コンテンツを楽しみにしており、デザイン目的で訪れているわけではありません。 この記事では、いつの時代にもマッチする、12種類の黄金ウェブレイアウトパターンを問題点や解決法、具体的な使い方のポイントと一緒に見ていきましょう。 コンテンツ目次 01. カード型レイアウト 02. グリッドレイアウト 03. マガジンレイアウト 04. 枠なしレイアウト 05. スプリット・スクリーンレイアウト 06. 単一ページレイアウト 07. F型パターンレイアウト 08. Z型パターンレイアウト 09. 水平方向の左右対称パターンレイア
写真AC
ここに JPGまたはPNGデータをドラッグ&ドロップ または ファイルを選択 5MBまでのJPG形式またはPNG形式のファイルのみアップロードできます。
ブログでインタビュー記事を書くときに便利な吹き出しのデザインを作ってみた - ディレイマニア
ブログでインタビューや対談などの記事でよく見る「サムネイルと吹き出しを並べて話してるように見せる」デザインを作ってみました。 floatを使わずにtable-cellを使って作りましたので、簡単に実装できますよ。 コピペで簡単に作れますのでお気軽に使ってください。
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
美しいデザインを作る鍵「タイポグラフィ」基礎の基礎 デザイン会社 ビートラックス: ブログ
美しいデザインとは何だろうか？ 言い換えれば、何がデザインの美しさを決定するのだろうか？ デザインを構成する要素はレイアウト、線、図形、色、形式、質感、そしてタイポグラフィなどがあるが、実はこのなかで最も重要なのがタイポグラフィである。 今回はこのタイポグラフィの基礎について、btrax CEO、Brandon K. Hillによる社内ワークショップの内容をもとにお伝えしたい。 デザイナーではないビジネスパーソンの方にとっても、書類作成等に大いに役立つ内容であるので是非参考にしていただきたい。 1．そもそもタイポグラフィとは？タイポグラフィとは、言葉を見やすく、読みやすく、 そして魅力的に見せる ための、 字体を配置する技術であり芸術である タイポグラフィの歴史は古く、15世紀まで遡る。最初のタイポグラフィはBlackletterである。（ちなみにこの発明以前、本などは人による手書きであっ
モバイルのUI要素を視覚的に分けるための６つのガイドライン
アプリのデザインは一見すると簡単そうかもしれませんが、実際プロトタイプに取りかかってみるとその難しさに気づきます。どのようなデザインにするか判断に迷いだすと、最初はシンプルに思えたことも複雑になり始めます。 例えば２つ以上のコンテンツを視覚的に分けるというシンプルなタスクでさえ、的確な判断をするのが難しいときもあります。 今回はそんな細かいUI要素の一つである「区切り線」やUI要素の「区分け」について見ていきたいと思います。 従来の区切り線 水平（または垂直）の線を使用すると、関連するコンテンツのセクションの間に必要となる視覚的な区分けを作ることができます。 この仕切りによってページにリズムと階層をつくり、コンテンツがどのように編成されているかユーザーが理解するのに役立ちます。 区切り線の種類と使い分け フルブリードディバイダー フルブリードディバイダー（余白なしで横幅100％の区切り線）
Digg Blog, Making the Switch from Node.js to Golang
This post was written by Digg Software Engineer Alexandra Grant and was originally posted on Medium. I’ve dabbled in JavaScript since college, made a few web pages here and there and while JS was always an enjoyable break from C or Java, I regarded it as a fairly limited language, imbued with the special purpose of serving up animations and pretty little things to make users go “ooh” and “aah”. It
海外最新webデザイントレンド参考まとめ (2016年11月) - I AM HARRY
今月も海外では、今までとは少し違う流れのwebトレンドが出てきていますので、ご紹介させていただきます。 関連記事：海外最新webデザイントレンド参考まとめ(2016年8月) 1. パープルカラー 今まであまり見られなかったパープルカラー。使用する上で少し難しいカラーの象徴でもあるパープルカラーですが、今少しずつ流行りつつあります。パープルカラーは、ブランディングする上で象徴的なカラーというよりも、今までは、webデザインにおいても補色的な役割がほとんどでした。 しかし、海外のwebデザイナー達は、このパープルカラーを今、大胆に使用しています。紫のカラーをサイトのメインカラーとして使用したり、ボールドをかけたテキスト、今までになっただけにかなり印象的です。 ここで使用するのに難しいとされているパープルについて、効果的な使用方法についての共通点をご紹介します。 モノトーンのカラースキームで統一
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダン日本語フォント指定
BLOGOS サービス終了のお知らせ
The Go Gopher – LINE stickers | LINE STORE
Site is undergoing maintenance
https://sozai.site/archives/141