[B! Webデザイン] simommのブックマーク

simomm id:simomm

Webデザインに関するsimommのブックマーク (55)

デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話
こんにちは。TAK(@tak_dcxi)です。今回記事にするのはタイトル通り﹁デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周り﹂についてです。以前ツイートしましたが、特に説明もなかったので自分の備忘録も兼ねて。 Androidに明朝体は無い Apple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Androidにはデフォルトで明朝体は入っていないです。よく明朝体マシマシのデザインを見かけたりするのですが、デバイスフォントだけではAndroidでそのデザインを実現することは不可能だと思っておいたほうが良いでしょう。ただ、明朝体のWebフォントを利用すればAndroidでも明朝体は表示できるので、デザイン的に明朝体が必須って場合はWebフォントを利用しない手は無いと思います。個人的見解ですが、デザイン重視なら明朝体はGoogle FontsでN
simomm 2020/12/31
web制作

webデザイン

css

frontend

フロントエンド

フォント
リンク
拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、﹁自然に帰ろう……自然に帰ろう……﹂と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。さて。さてさて。皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。失礼ながら、そのお気持ち、たぶん5ヶ月、遅いです！仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD︵テクニカルディレクション︶やPM︵プロジェクトマネージャー︶として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には﹁Web制作﹂の考え方にお
simomm 2019/05/29
web制作

webデザイン

webディレクター
リンク
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。なんでこんな話になったのか︵前置きなので次の章まで飛ばしてOKです︶デザイナーさんから﹁この画面をこんな風に作ってください﹂とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。僕の個人的な意見・経験ですが、いざ実装するぞとなったときに﹁あれ…ここってどうしたらいいんだろう？﹂と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。手が止まるたび、デザイナーさんに﹁ここってどうしたらいいですか？﹂と質問するのが何か新しい画面を作るときに必ず発生していました。﹁︵いつも聞いてる
simomm 2018/11/11
webデザイン

web制作

フロントエンド

UIデザイン
リンク
UIデザインは奥が深い！最近のスマホアプリで見かけるアニメーションの素晴らしいアイデアを解説
普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UXin Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。タブのコンテンツをスライドさせるアニメーションカードをタップして詳細を表示するアニメーションコンテンツを表示するアニメーションコ
simomm 2018/03/18
ui

design

Webデザイン

web制作

UIデザイン
リンク
これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
simomm 2018/03/18
　カラーの調整の仕方

デザイン

ui

design

webデザイン

UIデザイン
リンク
UXのプロはコンバージョン最適化をどう見ているのか？ - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。無料ダウンロードする　＞＞ CRO(コンバージョン最適化)の文脈においては、しばしばUX(ユーザーエクスペリエンス)についても議論しなければなりません。CROとUXが被る部分、そして対立する部分はどこにあるのでしょうか？そして、実際作業を行う際はどのようなことに気を付ければ良いのでしょうか？ UXの専門家たちの意見を聞いてみましょう。 — SEO Japan 自分が取り組んでいることに対して、他者の意見を聞くことは、いつも楽しいものだ。コンバージョンの最適化に関して、私たちはUXがプロセスの重要な部分を担っており、UXがさらなるコンバージョンをもたらしてくれると信じている。しかしUXの専門家たちは、コンバージョンの最適化
simomm 2018/03/11
コンバージョン

UX

design

webデザイン

marketing

SEO

アクセス解析

UXデザイン

マーケティング

UI
リンク
次世代のワイヤーフレーム「マイクロフレーム」とは
Marcinは製品デザインのプラットフォームである、UXPinのCEOおよび共同創設者です。2010年にUXPinを共同創設して以来、彼はポーランドのシリコンバレーオフィスの製作チームをリードし手助けしてきました。﹁ワイヤーフレームの時代は終わりました。インタラクティブなプロトタイプこそがすべてです。﹂私たちは少なくとも7年間は、この主張を聞き続けてきました。もしこのような議論に対して、人気がすべてを証明するというなら、真実はこの主張の逆と言えるでしょう。なぜならワイヤーフレームは終わったらしいと議論され続けているという事実自体が、ワイヤーフレームは顕在で、デザインプロセスにおいて少なくとも一部のプロジェクトやデザイナーに適合する形で存続していることを証明しているからです。ワイヤーフレームはどのように生き残ってきたのでしょうか？　実はワイヤーフレームは進化し続けています。ワイヤーフ
simomm 2017/09/20
ワイヤーフレーム

デザイン

UI

webデザイン

UIデザイン
リンク
Belajar Bahasa Inggeris Online 2022 (Kelas English 1-to-1)
Kalau anda teringin nak fasih English, boleh belajar Bahasa Inggeris online dengan kami. Kelas dijalankan menggunakan Zoom / Google Meet. Kelas Bahasa Inggeris Online Ini Khas Untuk Orang Dewasa Yang Faham English, Tapi Bila Speaking: Ayat Berterabur, Grammar Hancur Dalam proses nak fluent English, kenapa mesti malu? Kami di JomEnglish Academy faham, anda nak sangat cakap smooth dan rasa confident
simomm 2017/01/08
デザイン

UI

webデザイン

UIデザイン

Design
リンク
全ての人が知っておくべきデザイン・レイアウトの基本ルールとテクニック15選 - LITERALLY
デザイナーでなくとも、デザインについてのいくつかのルールを知っておくと、日々の生活で何かと役に立つ。今回は、誰もが知っておくべきデザインの基本原則・テクニックを紹介する。 1.デザインの基本原則を覚えよう 1-1.﹁1/3ルール﹂を覚えようレイアウトや写真の構成を考えるときには、黄金比*1よりも﹁1/3の法則﹂が便利だ。上の図のように、全体を9等分割したとき、各線の交点︵図の丸点︶に主張したいモノを配置するようにする。これだけで、不思議とスッキリとしたデザインになる。技の1つとして覚えておこう。 1-2.端をそろえて線をつくろう写真や文などの﹁要素の端﹂をきちんとそろえると、きれいに整理されて見える。これはデザインにおいてとくに重要な基本ルールだ。全てをそろえる必要はないが、縦にいくつか要素を並べる場合は常に意識しよう。 1-3.視線の流れを意識したデザインにしよう情報がたくさん詰め
simomm 2017/01/03
デザイン

design

webデザイン

UI

UIデザイン
リンク
InstagramやAirbnbなどのUIデザインに見る新しいトレンド
ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう？ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。「コンプレクション・リダクション」とは「コンプレクション・リダクション」なんて聞いたことがありませんか？　聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。編注：Complexionは「顔色」「血色」という意味で、Reducti
simomm 2017/01/03
１. より大きく、太い見出し２. よりシンプルで、汎用的なアイコン３. 使用色の減少

UI

デザイン

design

UIデザイン

webデザイン
リンク
海外の動向からみるデザインツールの現在
デザイナーとツールは切っても切り離せない関係です。ときにはデザイナーのスキルはツールの熟練度や使い分けの仕方で決まることもあります。長く使い続けたいですが Web やアプリのデザインは、テクノロジーと密接に繋がる仕事であるが故に、いつの間にか新しいツールが主流になることがあります。特にここ10年でデザインの仕事は大きく変わりました。今でも Web デザイン、アプリデザインにおいて Adobe 製品は多大な影響力をもっていますが、それがほぼ唯一の選択肢だった頃と今は違います。また、今まで以上にデザインにスピードと柔軟性が求められているので、Adobe 以外のツールも必要になってきています。では実際、世界のデザイナーはどのようなツールを使っているのでしょうか。ニューヨークのデザイナー Khoi Vinh さんが、The Tools Designers Are Using Today で
simomm 2017/01/02
SketchやInVisionが使われている

ツール

デザイン

webデザイン

design
リンク
Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選
みなさんはChromeの拡張機能を活用していますか？　拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL‥FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL‥PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ
simomm 2016/03/14
Chrome

デザイン

webデザイン

web制作

webdesign
リンク
Private Presentation
Private content!This content has been marked as private by the uploader.
simomm 2015/07/05
デザイン

Webデザイン

UX

UXデザイン

UIデザイン

design
リンク
人間の顔が入っている広告は177％コンバージョン率が高い【保険の広告に関する調査】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
simomm 2015/03/02
コンバージョン

コンバージョン率

webマーケティング

webデザイン

広告

マーケティング

marketing
リンク
ウェブデザインをはじめるあなたへ - ウェブ雑記
ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。＋いくつかの自分で作った資料 SlideShare 色彩センスのいらない配色講座色相、明度、彩度で色を説明できるようになる。ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。その上で、あまり間違いのない色の選び方がわかるようになる。ノンデザイナーのための配色理論最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。ウェブサービスの企画とデザイン僭越ながら明治学院大学で講義した時に作った資料。なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。かんたんキレイなウェブデザイン僭越ながら勉強会 (UT Startup Gym) 用に作った資料。なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウ
simomm 2014/07/06
素材

design

webデザイン

webdesign

デザイン

web制作
リンク
誰でも簡単にかっこいいロゴが作れる『Squarespace Logo』 | バンクーバーのうぇぶ屋
以前﹃色々信じられないクオリティでWEBサイトが作れるSquarespaceが結構ヤバイ！﹄という記事を書かせて貰ったんですが、ここが次はロゴマークすらも手軽に作れるツールを作ったようなので、とりあえずご紹介。とりあえず、物は試しと作ってみたロゴマークがこちら。なんか、どっかで見たことある感じになりましたｗでも、基本操作は非常に分かりやすい。 Squarespace Logo — Squarespace ステップ1．名前入力とりあえずサイトにアクセスしてロゴの名前となる文字を入力。ステップ2．ロゴマーク、ロゴタイプ、タグラインを設定もう見たらわかるレベルのインターフェースですね。ステップ3．作ったロゴをダウンロード前画面で、左下の﹃Save Logo﹄を押すと上のような画面が表示されるので、低解像度の物であれば即ダウンロード。といってもサイトなんかで使うには十分な解像度だし
simomm 2014/04/13
webデザイン

web制作

webサービス

Squarespace

ロゴ

logo

デザイン

design
リンク
色々信じられないクオリティでWEBサイトが作れるSquarespaceが結構ヤバイ！ | バンクーバーのうぇぶ屋
﹁なんじゃこりゃぁあ！！﹂とりあえず、コレ見た時の第一声でした。本当は昨日日本から帰ってきたばかりだったので、セミナー旅行の報告記事書くつもりだったんですが、それより先にこの興奮を伝えるのが先かなと思ったので即刻共有記事〜！以前﹃ヤバイくらい簡単にプロフェッショナルなサイトが作れるStrikingly.com﹄の記事を書かせて貰いました、これはこれでWEBページを作る上ではこれ以上は無いんじゃないか位の楽さとクオリティでした。しかし、今回はWEBページというよりは完全にWEBサイトを劇的に簡単に作れるという意味でのヤバさ、あとショッピングカート機能、ブログ、その他様々なページを作って運営することが出来る﹁Squarespace﹂をちょっと簡単にご紹介させて頂きましょう！このサイト自体は僕の記憶が確かなら以前に見たことがある気がするんですが、それにしてもその時はこんなヤバさは感じて無
simomm 2014/04/13
webデザイン

web制作

webサービス

Squarespace
リンク
Shunter.jp - 楽天のトップページを内容を変えずに、外観だけ変えてどれだけ見やすくなるか試してみました。
フルサイズ変更前まえがきなんで楽天？？すみません、何かのご縁だと思いますが、セミナーを受けていたら調度思いついた感じです。先日データサイエンスの始め方・データ分析のデザインパターンというセミナーに参加してきました。その中で一番私の印象に残ったのが、最後のプレゼンテーションで﹁楽天﹂のサイトのデザインについてでした。内容は簡単に言うと、﹃﹁おもてなし﹂をしましょう。そのためにユーザの感情をデータからモデル化することを目指す！﹄という話だったと認識しています。﹁おもてなし﹂という考え方は、とても共感しました。ユーザにとっていい物をという思想は常に持っていたい所存です。当該プレゼンテーションの中では、ホテルのバスタオルの再利用を促すための張り紙を1つの例として扱い、ユーザとの接し方を変える事でユーザの行動が大きく変わる事をこのことを説明されていました。この話での、具体的な比
simomm 2013/09/21
楽天

UX

データ分析

webデザイン

デザイン

EC

E-commerce

Eコマース

webdesign
リンク
Usability Checklist [UPDATED 2021] 🤓
Registering provides value to users. Unnecessary registration is avoided. Website is credible. Credible references, credentials, contact information, location, and images of real people are displayed on the website.
simomm 2013/04/28
ユーザービリティチェックリスト

Usability

ユーザビリティ

webdesign

webデザイン

web制作

UI

UX
リンク
UX戦略白書：「間違った」使えるものを増やさないために - UXploration
UX戦略のすべては経営戦略からはじまります。競合上の優位性を保つため、オペレーション・コストや開発コストを減らすため、またはモバイルなど各種デバイスにサービスを展開していくためなどその理由は様々です。なぜUX戦略なのか。今回ご紹介する白書でも言及されていますが、本来であれば会社の経営は詳細なデザインやコーディング、その後のリリース作業まで関わっている必要があります。UX戦略が社内で確立されていなければ、いま着手しているデザインや開発はやがては﹁間違った使えるもの﹂として生み出されてしまう恐れがあります。この白書では、エリック・シェイファー博士︵Human Factors International の創設者兼CEO︶がより戦略的な意思決定を可能にするためのUX戦略を、エンド・ユーザのモチベーション戦略を駆使してシームレスかつストレスフリーなクロス・チャネル戦略の観点から解説しています。
simomm 2013/04/07
UX

strategy

戦略

webデザイン

デザイン

design
リンク
1 2 3 次のページ