【まとめ】エンジニア向けデザイン参考サイト - Qiita
本記事は、身の回りの困りごとを楽しく解決！ by Works Human Intelligence Advent Calendar 2022の13日目の記事です。 はじめに エンジニアの私「個人開発したアプリのデザインがイマイチで世に出す勇気がなくて困っとる」 デザイナーの知人「どれどれ。あー確かに。いい意味でエンジニアらしさ出てますな♪」 私「『いい意味で』を先頭に付ければ何いっても許される説！！」 知人「デザイン作るときは既存にあるアプリやサービスのUIを参考にするといいですよ」 私「具体的には何を参考にすればエンジニアでもいい感じにデザイン作れそうですか？」 知人「それでは自分が参考にしているデザイン系のサイトをいくつか紹介していきます」 てことで、今回はエンジニア向けの個人開発やアイディア探しで役立つサイトをまとめていきます。 「ポートフォリオのアイディアが思いつかない」「開発した
サイトやアプリのUIデザインをする時に知っておくと良いアクセシビリティのこと - Qiita
はじめに デザイナー以外の方でも、サイトやアプリを作るためにUIを作成することはよくあると思います。 そんな時に最低限知っておくと良さそうな、アクセシビリティに関するTipsをまとめてみました。 この記事で紹介する以外にも色々とあるとは思うので、是非コメントなどで「これも追加した方がいいんじゃないか」など提案いただけると助かります！ この記事ではFigmaなどのデザインツールでUIをデザインする段階を想定しています。 そのため、「ボタンはdivでなくbuttonで実装する」「アイコンフォントにaria-labelをつける」「音声を勝手に再生しない」といった実装段階のポイントは扱いません。 読みやすい文字のサイズや色、フォントを使う 文字サイズ Webサイトやアプリで使われている本文のフォントサイズは14~18pxが多いです。 また、W3Cでは英文の場合18ポイント以上もしくは、14ポイント
WinAppDriverでテスト自動化：操作別テストコード - Qiita
WinAppDriverを使って、WindowsアプリのUIテストを自動化する。 環境構築手順や各操作の記述方法を以下にまとめる。 環境 Windows 10（開発者モード有効） Visual Studio 2019 インストール WinAppDriverのインストーラをダウンロードする。 https://github.com/microsoft/WinAppDriver/releases WinAppDriverをインストールする。 Windows 10の開発者モードを有効にする。 WinAppDriver.exeを実行する。 C:\Program Files (x86)\Windows Application Driver\WinAppDriver.exe テストコード作成 Visual Studioで単体テストプロジェクトを作成する。 Nugetパッケージマネージャーで「Appium
管理画面を作る：AdminLTE 基本編 - Qiita
管理画面を作るのは大変なので、なるべく手間を省きたい。Bootstrapでもいいが、意外としょぼくなるのと、何よりメニュ周りの制御が今ひとつな感じがする。そこで、管理画面作成に特化したCSSフレームワークを使ってみる。 いくつか選択肢はあるが、ここではAdminLTEを利用してみる。 bootstrapベースとはなっているが、いろいろと独自の癖があり、「bootstrapだと動くのに・・・」みたいなことがままある。 最初に注意 まじめに、TOPメニューから作って見たが、Dropdown等、基本的な機能がうまく動作しないことがあった。どうやら、他の要素に依存しているので、header(class="main-header")だけでなく、サイドバー(class="main-sidebar")や、コンテンツ(class="content-wrapper")、フッター(class="main-fo
失敗しづらいUIへのアプローチ - Qiita
「やっぱり自分にはUIは無理だ」 そう思う人もいるかもしれません。 でもちょっと待ってください。 実際に私が経験した失敗事例を聞いてください。 それで学びがあれば儲けもの、なければ「自分よりショボい奴がいるw」と思って自信を取り戻してください。 ＃私自身はデザイナーではないので、あくまでエンジニアがこれを知ってると便利なんじゃないというレベルのお話です とあるサイト作成の駄目UI サイトを作っていきながらダメな点を指摘していきます。 指摘は、センスによる美しさ的な指摘ではなく、ルールベースで誰にでも出来る内容の指摘です。 ということで、画面上部にメインのナビゲーションがあるサイトを作ってみます。 いきなり駄目ですねw メニューの文字と背景のコントラス比が薄くて読みづらいです。 暗めの背景の場合は明るめの文字にしましょう。 詳しくはエンジニアが知っておきたい色についてのお話を見てください。
画面をデザインするということ - Qiita
この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている１エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 （実際にUX５段階モデルを意識して仕事してるわけではありませんが、何かしら
【ハイブリッドアプリ】Monacaを利用してみてはじめに疑問に思ったこと一覧 - Qiita
Monacaでハイブリッドアプリを作りたいと思って利用してみてやってみたことや不明だったことをメモも兼ねてまとめてみます。 個人的な感想なのであくまで参考程度に。 どこで勉強したらいい？ サイト Monaca入門：Onsen UI＋AngularJSで作るハイブリッドモバイルアプリ Monacaを最初から使ってみてAngularJSの基本やAPIのコールなどから勉強できる。 超速アプリ開発！ニフティクラウド mobile backend 入門 ドットインストール：Monacaを利用してPUSH通知まで簡単にできる。サーバ側もmobile backendで簡単に構築できるのでお薦め。 Monacaでチェックインアプリを作成する ハンズオンの資料。同様にmobile backendを使ってアプリを作れます。 アシアルブログ 本家ブログなので情報が新しい。慣れてきたら見るとよい。 Qiita M
UWSC を使った自動テスト - Qiita
この記事は Sansanアドベントカレンダー 21日目です。 概要 UWSC で自社製 Windows アプリケーションのテストをする この記事では、Windows の メモ帳 の置換機能の自動テストを試してみます UWSC とは ざっくりいうと、キー操作などをスクリプトで記述・再生することができます。 詳しくは、↓を参照下さい。 http://www.uwsc.info/ UI 操作の再現ができるので、効率的に UI 操作を伴うテストができます。 （※Window の作りによっては、容易に操作できないアプリケーションもあります） メモ帳の置換機能をテストしてみる ABC を入力して、「Aを1に置換」すると、1BCになっていることを確認する。 Windows のメモ帳 置換ダイアログの UI パーツなど、↑でイメージしておいて下さい。 手順（A を1 に置換する） メモ帳を起動する メモ帳
古めの組織に導入する自動テスト・アンチパターン集 - Qiita
アジェンダ そもそも、なぜ自動テスト？ 自動テストと騒ぐと冷たい目で見られる事もあるという話 個人・組織としての失敗談と、その処方箋 書かないこと テストがないレガシーコードにテストを組み込む方法については、触れない そもそも、なぜ自動テスト？ 自動テストは、うまく導入すれば、プロダクト品質の担保とユーザへのデリバリー速度に大きく寄与することが分かっているため。 Web業界の先端が、自動テストの効能を体現してる たとえばこんなフロー テストコードを書く プロダクトコードを書く テストコード、プロダクトコードをコミットしてプルリクを出す プルリクをマージすると、CI環境がロジックのフルテスト、UIのフルテストを走らせる テストが全部通ったらそのまま自動的にデプロイする コンピュータに任せられることは全てコンピュータに テスト実施は単純作業なので、人間が実施しなくても良いようになっている 人間
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドラッグ＆ドロップでli要素の並べ替え→DB書き換え - Qiita