[B! webデザイン] gachakku0131のブックマーク

Web・アプリ開発のエンジニアが知っておきたい、デザインツール「Figma」の基本 - JMDC TECH BLOG

JMDCでアプリのデザインを5月から担当しているはんざわです。 Webやアプリのフロント開発者のみなさんはデザインツール Figmaをご存知でしょうか？ JMDCではこれまでAdobe XDをメインで使用していました、今年からFigmaに乗り換えました。乗り換えに伴い、デザイナー以外のメンバーにもFigmaを操作できるようになるべく、勉強会を開催しました。勉強会はオンラインで開催。Figmaで資料を作成、参加者に資料を開きながらGoogle Meetを繋げて詳細を説明していきました。勉強会で使用した資料はFigmaのCommunityにアップしているのでぜひ見てみてくださいね。 www.figma.com エンジニアがFigmaを触れるようになることのメリット基本知識と基本操作実装するために使うデザインシステムについてそのほか便利な機能さいごにエンジニアがFigmaを触れ

gachakku0131 2021/10/17

webデザイン

リンク

【商用OK】Google Fontsで使えるオススメ日本語フリーフォント32個まとめ

この記事では、Google Fontsで使える日本語フリーフォントをまとめてご紹介します。 Google Fontsには現在、64の日本語書体が提供されており、すべてのウェイトを合わせると、132フォントが商用OK＆完全無料となっています。フォント選択の幅が広がるWebフォントを利用して、ウェブサイトのデザインをグッと良くしてみませんか。 Adobe CCの日本語フォントと、漢字も使える日本語フリーフォントも一緒に活用してみると良いでしょう。

gachakku0131 2021/09/18

リンク

なぜWebサービスはUIの改悪を繰り返すのか

自分はWebサービスの表側を作るお仕事に就いていますが、日本人ってサービス系の開発に向いてないよなーと強く思います。特にWebサービスやアプリについては、まじで向いてない種族だと思います。一番アカンなーと思うのが、リリース後の開発において機能追加は精力的に行う一方、機能削減はぜーんぜんやらないんですよね。 Webサービスって、リリース直後の段階である程度しっかりとしたUIで組まれていて、機能追加のことは基本的には考慮されていないケースが多い印象があります。そのせいか、機能が追加されればされるほどいびつなUIとなっていって、最初は見やすかったのに、どんどん見づらくなっていくという…。そうなってくると途中で全面リニューアルを行わざるを得ないことになるんですが、その頃には元のコードはぐっちゃぐちゃになっているわ元いたエンジニアはやめてるわてんやわんやで、もうどーしようもない状態になってい

gachakku0131 2020/09/28

リンク

画面をデザインするということ - Qiita

この記事は社内の勉強会で話した内容を再編したものです。私自身はPC/ブラウザ/スマホのアプリ開発をしている1エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。デザインとはデザインとは単に見た目だけの話ではなく、﹁ビジネス﹂と﹁ユーザーが得る体験価値﹂から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。画面を設計するまでの作業ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。︵実際にUX5段階モデルを意識して仕事してるわけではありませんが、何かしら

gachakku0131 2020/09/17

webデザイン

リンク

分かりやすい言語切替UIをデザインする3つのポイント | A.C.O. Journal | A.C.O. Inc.

こんにちは、情報アーキテクトの曽です。第一言語は日本語ですが、英語と中国語もよく使うため、多言語展開するプロジェクトに関わることがあります。多言語展開しているWebサイトやサービスには、たいてい﹁表示言語を切り替える機能﹂があります。この言語切替UI、実は大企業や公的機関のWebサイトでも適切にデザインできていない事例が少なくありません。私は情報アーキテクトとしてグローバル企業のWebサイトの設計をしたり、また一人のユーザーとして多言語Webサイトを利用したりする中で自分なりに言語切替メニューのデザインで押さえるべきポイントが見えてきました。この記事ではそのポイントを紹介します。言語切替UIとはそもそも何なのか具体的なポイントの話をする前に﹁そもそも言語切替UIって何のためにあるんだっけ？﹂ということを考えてみましょう。もちろんその名の通り﹁表示言語を切り替えるため﹂ですが、もう

gachakku0131 2020/09/10

webデザイン

リンク

Googleが繰り返すデザイン変更からたどり着いた極意「明白こそが至高」について解説

by Rajeshwar Bachu GoogleはGoogle検索やGmailなどさまざまなプロダクトを作成していますが、そういったプロダクトをデザインする中で得た知見などをまとめるためのデザイナー・開発者たちによる共同プロジェクト「Google Design」が存在します。そのGoogle Designが、「明白なUIこそ至高のUIである」として、ユーザーインタフェース(UI)デザインにおいて重要な要素をまとめて解説しています。 The Obvious UI is Often the Best UI - Google Design - Medium https://medium.com/google-design/the-obvious-ui-is-often-the-best-ui-7a25597d79fd デザイナーはプロダクトができる限り使いやすく、可能な限り誘導的なものになるよ

gachakku0131 2019/10/12

リンク

エンジニアのための「Sketch入門！」　1時間コース - Qiita

※﹁Sketch﹂はMac専用アプリです。Windows版はありません。﹁演習ファイル＋動画＋演習付き﹂で記事を書いてます。エンジニアの人から﹁Sketch使ってみたい﹂﹁日本語の記事が少ない﹂という声を聞いて、最近社内で勉強会しました。Sketchについて日本語の記事を調べてみたところ、このレベルの記事はけっこうありました。ただ、学びやすいか？といえばそうではないらしいので、少し工夫して学びやすいように書いてみました。ハンズオン用などにご利用ください。SketchとはSketchについて一応さらっと書いておきます。・アプリやWebのデザイン・UI設計などに使われるMac用アプリケーション IllustratorやFireworksのようなツールです。・$99 買いきり(2016/02 現在︶　有料です。ちなみにApp Storeでは買えなくなりました。ショバ代かかるか

gachakku0131 2018/06/05

webデザイン

リンク

インスタは「妄想の検索エンジン」メルカリは「通販の検索エンジン」としてつかう。女子大生が教えてくれたスマホで「ビキニ」を買うまでの心理と経路。

インスタは﹁妄想の検索エンジン﹂メルカリは﹁通販の検索エンジン﹂としてつかう。女子大生が教えてくれたスマホで﹁ビキニ﹂を買うまでの心理と経路。女子大生の方に﹁スマホで買い物する過程﹂を詳しく聞いてみました。インスタで妄想してからメルカリでモノを買う…？？まず﹁インスタ検索﹂で妄想を膨らませる。スマホをつかって﹁最近買ったモノ﹂って何かありますか？どういう経緯で買ったのかも知りたいです。女子大生‥ このまえ、海外旅行のために﹁ブラジリアンビキニ﹂っていう、露出度の低いビキニを買いました。まず、最初にやったことは﹁インスタでの検索﹂ですね。ハッシュタグ﹁#ブラジリアンビキニ﹂で検索して、実際に着ている人の写真を見てみました。その写真を見ながら﹁わたしが着ても似合うかな？﹂って妄想するんですよ。日本人の体型でも似合うかな、自分が着てもカワイイかなって。笑たしかに、通販サイトにも写

gachakku0131 2017/05/21

webデザイン

リンク

シンプルなカラーで作る失敗知らずのウェブデザイン

ウェブデザインにおいて、サイトイメージに大きな影響を与える「カラーパターン」は重要です。ついつい色にこだわって色数を増やして全体のバランスを崩してしまいがちなカラーデザインを、極力少ない色だけで、バランスの整った見た目に美しい仕上がりにする方法論がウェブデザイナーによって解説されています。 A Simple Web Developer's Guide To Color – Smashing Magazine https://www.smashingmagazine.com/2016/04/web-developer-guide-color/ Design Academyを主催するウェブデザイナーのローラ・エリザベスさんは、シンプルなカラーデザインで失敗しないデザイン論「simple color workflow」を提唱しています。エリザベスさんは多くの色を複雑に使いこなすよりも、サイトのカ

gachakku0131 2016/04/18

リンク

今さら聞けないマテリアルデザインとは？5分でわかる解説 | SONICMOOV LAB

2014年6月にGoogleマテリアルデザインガイドラインが公開されてから、AndroidはもとよりiOSのアプリでも、このガイドラインを取り入れたUI/UXの優れた作品が多数出てきました。今回はそんな相変わらずトレンディなマテリアルデザインのガイドラインをわかりやすく、ポイントを絞ってお伝えします。目次マテリアルデザインとは？平面なのに3D 紙とインクマテリアルデザインのカラーグリッドシステムアニメーション心地の良い動きタッチフィードバック意味を持ったアニメーションまとめマテリアルデザインとは？マテリアルデザインを直訳すると「物質的なデザイン」という意味です。デジタルのデザインなのにどの辺が「物質的」なのか、それは次の2つの概念で表現されています。平面なのに3D マテリアルデザインでは、要素の重なりを物理的にとらえ、平面の中に、明確なZ軸の概念を持たせていま

gachakku0131 2015/07/10

webデザイン

リンク

エンジニアがデザインに取り組んでわかったこと

最近、いくつかのデザインに取り組んでわかったことがあるので、書いておこうと思う。ぼくは2,3年前にこの業界に入ってからずーっとフロントの実装畑でやってきた。それは自分の意図していたものではなかったけど、前職のまぼろしという会社は実装が強みの会社だったので、デザインに触れることはほぼほぼなかった。それもあってか、ぼくは﹁もうちょっとコストを考慮してほしい﹂﹁このあしらいが一体ユーザーにいくらのお金を落とさせるんだろう﹂とか、あげくの果てには﹁実装のことを考えたデザインをすべき﹂とまで考えていた。これらの考え方はぼくだけでなく、コーダーからよく同様の声が上がっている。だけどデザイナーさんと接する機会が増えるごとに、デザインができるようになったら今までイラついていたことがどんな風に見えるのか確かめたいな、という気持ちになった。それ以外にも﹁なにか作るとデザイナーばかり褒められて厳しい﹂

gachakku0131 2015/03/28

webデザイン

リンク

商用も無料！Bootstrapをベースに最近のトレンドを取り入れた新作テンプレートのまとめ

Webデザインの最近のトレンド、縦長ページ、スクロールエフェクト、CSS3アニメーション、フラットスタイルなどを取り入れたBootstrapのテンプレートを紹介します。 Bootstrapは先週3.3.0がリリースされ、Bootstrap4の開発も進んでるそうです。4ではIE8はサポート外になる予定。

gachakku0131 2014/11/15

リンク

そこそこユーザビリティの高いフォームを作った

そこそこユーザビリティの高いフォームを作った入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。フォームサンプルソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。フロントエンド実装だけです︵サーバ側スクリプト

gachakku0131 2014/09/13

リンク

お問い合せフォームをコーディングするための9つのTips | 株式会社LIG

こんにちは。 LIGフィリピン支社代表のせいとです。お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。また、今回の記事を書くにあたり、デモページを作成しました。こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う「送信する」「入力画面に戻る」などの要素を作る際、タグは

gachakku0131 2014/09/13

リンク

Ayumi Suzuki | Designer

Webデザインを中心にグラフィックデザイン、書道、イラストなどいろいろモノづくりをしている、東京在住のデザイナー・鈴木歩美のポートフォリオサイトです。

gachakku0131 2014/07/13

webデザイン

リンク

デザインメモ | Webデザイナー鈴木歩美のブログ

2017年5月から「デザインメモ 2.0」(designmemo.jp)にて更新しています

gachakku0131 2014/07/13

webデザイン

リンク

ウェブデザインをはじめるあなたへ - ウェブ雑記

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

gachakku0131 2014/07/11

webデザイン

リンク

【HTML5・CSS3】おしゃれなテーブルデザインのサンプルソース5点 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。table作成時に参考になるサイト本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。table専門参考ページ4選table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。テーブル｜CSSデザイン｜スタイルシート︵CSS︶｜PHP & JavaScr

gachakku0131 2014/05/03

リンク

模写して学ぼう！駆け出しデザイナーのためのデザイン上達法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。デザイナーの藤田です。「石の上にも3年」と言いますが、私のWebデザイナーとしてのキャリアもついに2年目が終わり、3年目を迎えようとしております。日々学ぶ事が多く、とても3年程度で大成するような業種ではないですね（どの業種にも言えることだとは思いますが）。そんな私がデザイナー1年生だった頃を振り返ると「手っ取り早くデザインが上達しないかなー」なんてよく考えておりました。そこで今回は、私の経験から最も手っ取り早くデザインが上達する「トレース（模写）」の方法をご紹介いたします。なぜトレースがデザインの上達につながるのか？なぜトレースがデザインの上達につながるのか、自分なりに考えてみました。「デザインは細部に宿る」と言われますが、その細部に気付く「デザインの引き出しが増える」「自分の悪い所が解る」←これが一番重要！などなど、良いことがたくさんあります。まずはカッ

gachakku0131 2014/02/22

リンク

はてなブックマーク

タグ

関連タグで絞り込む (57)

webデザインに関するgachakku0131のブックマーク (191)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス