【Mac】超簡単にアプリ用画像やアイコンを作る方法｜やこ
iPhoneアプリを作るとき、ボタンやアイコンなどの画像が必要になりますね。イラストレーターやフォトショップ、Gimpなどの画像制作アプリを使うのが王道ですが、慣れない人には少々オーバースペックで、扱いにくい面もあります。 そこで今Macに入っているシンプルな機能だけを使って、簡単にアイコン画像やボタン用画像を自作する方法をご紹介します。 MacのKeynoteを使うMacに無料で入っているKeynoteは、少ない機能でも簡単に画像加工しやすいので初心者におすすめです。 Keynoteを開いて、スライドをクリックして右の「フォーマット→マスタースライドの編集」を選び、「書類→書類→スライドのサイズ」から、「カスタムのスライドサイズ」を選択します。 サイズ設定画面が出たら、幅1024×高さ1024にします。 これでマスタースライドの画面をアイコンの元画像の大きさに設定できました。ここに画像を
Macアプリケーションのアイコンをオリジナル画像に変更する
実質的には1024 x 1024 pixの画像を1枚用意するだけです。あとは縦横比維持のサイズ変更で対応できます。 ファイル名に@2xという文字列が入っている画像はRetinaディスプレイ用の画像です。 画像をAppleアイコンイメージに変換する 作成した画像10枚を同じディレクトリに格納します。このディレクトリ名は末尾に .iconset という文字列を付けなければいけません。 ls icon.iconset icon_128x128.png icon_16x16@2x.png icon_32x32.png icon_512x512@2x.png icon_128x128@2x.png icon_256x256.png icon_32x32@2x.png icon_64x64@2x.png icon_16x16.png icon_256x256@2x.png icon_512x512.p
「のどが渇いた」というユーザーに何を出す？ ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
2022年9月13日 株式会社メンバーズ ポップインサイトカンパニーでのウェビナーのスライドです。「ユーザーが欲しいと言った機能をつけたのに使われない！」という経験はありませんか。プロダクトをつくるとき「ユーザーの心理を理解しよう」とよく言われます。しかし、ユーザーに言われたままやることと、ユーザーが本当に望んでいることは異なります。「UXデザイン・UXリサーチ」は、ユーザーを理解するための専門技術です。ユーザーインタビューやユーザビリティテストを用いてファクトを集めることで、ユーザーの表面的な言葉に惑わされない、本当のインサイトにたどりつくことができます。かんたんなワークも交えながら、体系的に解説いたします。Read less
【メモ】良いDesign Docs(Software Design Document)を書くためのリソース集
自分が良い Design Docs(Software Design Document)を書くために、読んだ/参考になったリソース集 一覧 Design Docs とは Design Docs at Google デザインドック(Design Doc)について デザインドックで学ぶデザインドック 残業も減らせる!? 上級エンジニアになるための Design Doc 超入門 「Design Doc」って何なのか？ What Is A Design Doc In Software Engineering? (full example) What is a Design Doc: Software Engineering Best Practice #1 https://github.com/kaiinui/note/blob/master/Design--Designdoc.md Googleの
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！
なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで
【EC-CUBE4系】デザイン変更について
EC-CUBE4.0.0正式版がリリースされましたが、皆さんはインストールはしてみましたか？ インストールをしてみると分かるのですが、フラットデザインでどのような分野にも使えそうなスッキリとしたサイトになっています。 また、レスポンシブになっているので、ボタンなどは画像ではなくテキストです。 その為、デザインの知識が無くても変更が容易になっています。 初期テンプレートのままでもサイトはOPENできそうですが、最低限直したい箇所があるかと思います。 今回は、最低限の変更方法についてまとめてみました。 初期の状態ですとEC-CUBEのロゴが表示されていますので、まずはファビコンの変更をしたいと思います。 １．ファビコンは、「/html/template/default/assets/img/common/favicon.ico」にある「icoファイル」が読み込まれています。 変更後のicoファ
EC-CUBE4 デザインカスタマイズ（あっさり解説） - Qiita
はじめに 本記事は 「EC-CUBEさっぱりわからん」 から 「見た目は変えられる」 になることを前提としています。 普段はWordPressでのサイト制作が主なため、EC-CUBE開発でのSymfonyの理解に時間がかかると感じました。 Symfonyの記法やMVCの説明は公式の開発ドキュメントや技術書に任せ、 あくまでデザインのカスタマイズについてのみ、あっさり解説していきます。 ・開発ドキュメント（公式） https://doc4.ec-cube.net/ 公式のドキュメントは正義です。が、 慣れていない段階では読み解くハードルがやや高いです。 ・EC-CUBE 4 システム構築入門 &店舗運営・管理ビギナーズガイド https://www.amazon.co.jp/dp/B07PBWN5Y9/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1
CSSでスタイルをIEのみ・Firefoxのみ・Chromeのみ・Safariのみに適用する方法
各ブラウザのみにスタイルを適用する方法をご紹介いたします。 IEのみ表示が崩れるとか、Firefoxのみ違うサイズにしたい、といった場合に使えるCSSハックです。
シリコンバレーの「何が」凄いのか
シリコンバレーのスタートアップを数多く取材する中で気付いた「シリコンバレーにおけるディシプリン（規律）の存在」や「General Electric（GE）やIBM、SAPといった老舗企業が必死になってシリコンバレーのスタートアップを真似している理由」、そして「日本企業がイノベーションを実現するための処方箋」について解説します 詳しく知りたい場合は「GE 巨人の復活」をご覧下さい。 http://www.nikkeibp.co.jp/atclpubmkt/book/17/P55110/ 今後の記事は「シリコンバレーNext」をご覧下さい。 http://itpro.nikkeibp.co.jp/siliconvalley/ Read less
画面をデザインするということ - Qiita
この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている１エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 （実際にUX５段階モデルを意識して仕事してるわけではありませんが、何かしら
HTML5でつまずきやすいasideとsectionの使い方
HTML5分かりにくいですよね。 初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします！ 自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。 さて、実はカヤックで働き始めてHTML5を本格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。 そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。 まずその前に 本題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。 文字コードの指定はmeta要素のcharset属性で 今までは以下のようにmeta要素の中に長々と属性を
HTML5【 レイアウト 】2～article、aside、section、nav - プログラマカレッジ
HTML5 【 レイアウト 】1 ～ 新要素を使った書き方のイメージで、HTML5の新要素を使ってWebページのレイアウトを組む際の書き方をざっと紹介しました。今回は、そこで使用した<article> <aside> <section> <nav>について、少し詳しくみていきたいと思います。 なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。 １．article article要素は、それだけで内容が完結している部分に使います。 ページのメインコンテンツや、ブログの１つの記事など、それだけで完結した内容であれば、article要素を使うのに適しています。 1ページに何回使ってもOKです。 HTMLは下の通りです。 <article>は１つだけ
現代開発者のためのCSS基礎技術 - Qiita
ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。 特に プログラミング経験はあるもののウェブフロントエンドの経験が浅い方 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方 にお勧めです。 プロローグ CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。 この場において
やさしいウェブのためにすべきこと。英国のウェブアクセシビリティ啓蒙ポスターの日本語版が公開 | inquire.jp
英国内務省がウェブアクセシビリティを高めるための啓蒙ポスターを発表し、日本語訳も登場した。障害者にも健常者にもやさしいウェブのために、まずは「知ること」から始めたい。 この夏の参議院選挙で、重度障害者の国会議員が誕生した。快挙に喜ぶのも束の間、「国会議員が国会に登庁する」ために、参議院のバリアフリー化が進められた。 大型の車椅子で利用できるスロープや車いす用トイレの設置、パソコンの持ち込みや、本人の代わりに挙手や投票を行う介助者の付き添い。一連の合理的配慮の実施を報じるニュースを通して、健常者が日頃は気づかない「不自由さ」の数々に気づかされた。 オンラインにおける健常者と障害者の壁 こうした「不自由さ」は、私たちが毎日のように利用しているインターネット上にも無数に存在する。障害のある人のうち、半数以上がインターネットを利用しているが、彼らが私たちと同じ体験を得られているわけではない。 例え
医療機器のUI/UXデザイン〜デザインプロセスの全容〜 - 病院経営ウェブマガジン“Healthcare Compass (ヘルスケア・コンパス)”
私は株式会社ジャイロで医療機器の画面や教育コンテンツのUI/UXデザインおよびディレクションを行なっています。医療機器のデザイン業務は、主にメーカーから受注しています。 10年前に心臓カテーテル用検査装置の画面デザインを受注して以来、心電計、血圧脈波検査装置、産婦人科用ECGモニタ、歯科用CTスキャナ装置、手術室用統合表示モニタなど、いろいろな機器の画面表示部のUI/UXデザインに取り組んできました。 デザイン実施例：手術室用統合表示モニタ（AMEDからの支援プロジェクト「安全性と医療効率の向上を両立するスマート治療室の開発（SCOT：Smart Cyber Operation Theater）」 今回は、医療機器画面のUI/UXデザインについて、どのような流れで受注から納品までの業務を進めているのか、ステップを追ってご紹介します。 ステップは大きく分けると3つあります。 依頼から契約まで
未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita
エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラムを組みました。 だいたいうまくいったので、メモがわりに晒しておきます。 前提条件 誰でも7日間でエンジニアになれると言っているわけではありません。あくまで一例として捉えていただければ幸いです。 担当してもらう予定の領域 HTML/CSS コーディング JavaScript はそこそこで（動きのエフェクトやカルーセルを仕込める程度） concrete5 テーマの開発（PHPファイルに foreach を入れていくイメージ、WordPress と変わらない） 流石にアプリケーション開発で7日間は無理
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://docs.oracle.com/cd/E19620-01/805-4184/iconeditor-67/index.html
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
Pinta - Simple Painting for Gtk