スマホのUX、今のままですか？ メルカリ・資生堂の感動的な表示速度に貢献「ImageFlux」とは
新しいデバイス対応も、デザインアイディアも画像に制限させない 斎藤 ImageFluxでは、元となる画像をひとつサーバーにアップしていただき、その画像URLのパラメータを変更することで、拡大・縮小、切り抜き、回転、画像フォーマットの変更といった画像処理を行うことができます。 たとえば、オリジナルの画像（目安：4M程度）のURLが以下だとします。 https://demo.imageflux.jp/photo.jpg 幅200ピクセルの画像が必要であれば、以下のようにURLを書き換えることで、幅はもちろん、ウェブに適したサイズ（目安：8KB程度）に変更してくれます。 https://demo.imageflux.jp/w=200/photo.jpg 高さを指定することで、横長の画像を正方形にトリミングすることも可能です。 メルカリ様のアプリのトップページが、ある時、2列から3列の表示に変更に
【スライス不要】Photoshop画像アセット生成の基本とつまずきがちな5つのコト | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） スライスせずに書き出せるPhotoshopの「画像アセット生成」って？ 画像アセット生成とは、ファイルのレイヤーやレイヤーグループのコンテンツからJPEGやPNG等の画像アセットを生成するという、スライス作業を不要とする機能です。PhotoshopCCから実装されている機能で、CC2014以降は画像に加えてSVGの書き出しも可能となりました。 普段からコーディングもしているデザイナーさんは効率化のために早くから使ってい
画像の最適化 | Web | Google Developers
Web performance is a crucial aspect of web development that focuses on the speed at which pages load, as well as how responsive they are to user input. When you optimize your website for performance, you're giving users a better experience. The initial release of this course focuses on web performance fundamentals, that beginners should find informative. Each module aims to demonstrate key perform
センスがないノンデザイナーの味方！海外発の人気デザインツール「Canva」が上陸
Facebookに投稿する画像やちょっとしたバナーをセンス良くサクッと作りたい。そんなときに便利なデザインツール「Canva（キャンバ）」がオーストリラリアから日本にやってきました。 Canvaは、Webや印刷に使えるグラフィックをブラウザーまたはiOSアプリ上でデザインできるサービス。「バナー」「チラシ」「ポストカード」「名刺」「プレゼン資料」など、あらかじめ用意された膨大なテンプレートの中から用途と好みに合ったデザインを選択し、文字や画像、色などをカスタマイズして仕上げることができます。
2500種類もの素材から嵌め込み画像を手軽に合成できるサイト「Placeit」
Placeitとは Placeitは、一応無料で使用できるはめ込み画像作成ツールです。 基本的に、以下のようなデバイスにはめ込む形の合成素材が多いです。 以下のような、街中の広告エリアにはめ込む素材もそろっています。 これらの他にも、様々な凝ったモックアップ素材が全部で660種類以上あり、 かなりの確率で、イメージと合うはめ込み用素材が見つかるのではないかと思います。 実際に、以下の画像同士を合成させてみると、 以下のようになります。 また、Placeitは、URLからサイトのキャプチャ画像も、手軽に作成できるようになっています。 キャプチャーを表示させたいURLと以下の素材を組み合わせると、 以下のような、画像も手軽に作成できます。 合成画像の作り方 合成画像の作成は、以下の2通りあります。 写真を準備して合成する URLからキャプチャーを取得して合成する 以下で、それぞれの方法について
いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史
古き良き手法から、最新の手法まで。必要なときのために引き出しにしまっておきたい、画像置換の手法まとめ。 CSSの画像置換（Image Replacement）は長い歴史の中で移り変わってきました。もし、いまでもCSSで画像置換をするのなら、現在でも使える多くの有効な手法があります。一方で近い将来、CSSの画像置換を使うとグーグルが実際にペナルティーを課すようになるかもしれない、ということは知っておくべきことでしょう。いまのところは大丈夫だとしても、あまりおすすめはできません。 とは言っても、CMSまたはプロジェクトとの関係で画像置換を使わざるを得ない場合もあります。そこで、この記事ではまだ有効な、長い歴史のあるCSSの画像置換の方法を紹介します。画像置換が完全に使えなくなる前まで、これから紹介する手法さえ知っていれば十分でしょう。 ネガティブtext-indentを使うPhark手法 Ph
Illustratorでのイマドキな画像書き出し方法【アセットの書き出し】
2016年12月7日 Illustrator 昔からIllustratorラブ！な私ですが、いつの間にやらWebデザインをする上での便利な機能が増えてきて、ますます嬉しい次第です。その中で今回は画像アセットを使った書き出し方法を紹介します。昔はスライスツールを使っていましたが、そんな面倒なことをしなくてもオブジェクトをドラッグ＆ドロップで簡単に書き出せちゃいますよ。 ↑私が10年以上利用している会計ソフト！ アセットの書き出しって何？ 2016年6月にアップデートされたIllustrator CCでは、従来のスライスとは違う、新感覚の画像書き出し方法である「アセットの書き出し」という機能が追加されました。オブジェクトをパネルにドラッグして追加すると、サイズや解像度、デバイスに合わせたフォーマットに書き出せます。Webやアプリ用のアイコンや、画面全体のデザインを行う上でも欠かせない、便利な機
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
WebP画像を作成できるアプリ「WebP画像を作る君」を公開 - ICS MEDIA
みなさんは次世代の画像形式「WebP(ウェッピー)」をご存知ですか？ 聞いたことはあるものの、作り方や採用したときのメリット、事例にピンとこない方が多いのではないでしょうか。「せめて手軽にWebPを作れるツールが欲しい」と思い、デスクトップアプリケーション「WebP画像を作る君」(英語名は「WebP Converter」)を開発し公開しました。本記事では、このアプリケーションでの使い方から、ウェブページにWebP画像を配置する方法を解説します。 ▲ オリジナルアプリケーション「WebP画像を作る君」。無料で配布しています ▲「WebP画像を作る君」の動作ビデオ WebP(ウェッピー)とは WebP画像形式は米Googleが開発している静止画フォーマットで、採用することでWebサイトの表示速度短縮やトラフィック量の節約が期待できます。具体的には従来のPNG/GIF/JPEG画像形式に比べて次
もうサムネイルで泣かないための ImageMagick ノウハウ集 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちわ、アプリケーション基盤チームの青木(@a_o_k_i_n_g)です。好きなみかんは紅マドンナです。 今回は、サイボウズのサムネイル事情について記事を書きたいと思います。サイボウズに限らず通常の Web アプリケーションでもサムネイル作成はよくあると思いますが、ハマりどころが多く涙しているサムネイリストも多いかと思います。これからの時代を生きるサムネイリストが快適なサムネイルライフを送れるよう、知見を共有したいと思います。 弊社では画像変換ツールに ImageMagick を用いており、従って本知見は ImageMagick 固有のものがほとんどです。 画像比較は人間の眼で行うべし サムネイル周りに何か修正を入れたら修正前後の画像を比較しましょう。機械によるバイト列の比較では画像の良し悪しがわかりません。頼れるのは人間の眼だけです。肉眼で確認しましょう。 比較できるツールを作ると良
モバイルブラウザでの画像アップロードについて覚え書き
前置き スマートフォンブラウザで画像アップロードしたいという要件があったので、あんまり無理しないで実装できるとこまでやったら、どうなるのかやってみた。 やりたいことは、アップロードに加えて、画像データにリサイズ処理を適用すること。さすがに3G回線で2MB近い画像データを、input[type="file"]でそのまま送りつけるのは無理がある。 某所で書いたブツの要約版なので、某所のほうを見た諸氏はアレでソレして解釈してください : ) サンプルコード 基本方針としては、以下のようなコードで処理することになる。 var elFileInput = document.getElementById('js-select-photo'), elPreview = document.getElementById('js-preview-photo'), createObjectURL = windo
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
PhotoshopのGenerator機能で、めんどうな画像書出しとサヨナラする - HOME'S Designer's Blog ｜ ホームズ デザイナーズ ブログ
2015-06-08 PhotoshopのGenerator機能で、めんどうな画像書出しとサヨナラする こんにちは、HOME'Sアプリのデザイナーをしている、こいずみです。 主にiOSのアプリを担当しています。 Webやアプリのデザイナーの方なら必ずやる、パーツ書出し。 この作業って地味に大変ですよね。 とくにスマートデバイスは年を追うごとに様々な解像度のデバイスが発表され、それぞれに合わせたパーツの書出し工数はどんどん膨らんでいくばかりです。 そこで、今回はPhotoshopの便利な機能「Generator」を使って、iOSの３種類の解像度をいっぺんに書出す方法をご紹介します。 Generatorって？ Generatorとは、PhotoshopがCC 14.1から搭載された機能です。今まではWebやアプリ用の書出しと言えば「Web用に保存」だったのですが、Generatorを使うことで
デザイナーもエンジニアも幸せになれるiOS画像の書き出し方 | keisuke.tsukayoshi
前回iOSアプリのデザイン指示書についての記事でも少し触れましたが、iOS開発の画像素材の書き出しはデザイナーが担当するのが一般的なようです。しかし実際にコードを書けない多くのデザイナーにとっては、どんな画像をどのように書き出せばいいのか不安になってしまうことも多そう。 というわけで今回は、主にアプリデザインの経験のないデザイナーさんに向けた簡単なtipsと、最後にちょっとグレーだけど使い所によっては効率があがるぼくなりの手法も少し紹介してみたいとおもいます。 基本的なこと デザインは横幅640ピクセルで作る 基本的なところですね。後述しますが、Retina対応したiPhoneとそうでないもののふたつの解像度の画像が必要になるのでどちらも兼ねるこの解像度で作ります。 非Retina端末のために半分のサイズの画像も用意する 実際にXcodeでの開発は横幅320pxをベースに実装するので、もと
画風を変換するアルゴリズム - Preferred Networks Research & Development
Deep Neural Networkを使って画像を好きな画風に変換できるプログラムをChainerで実装し、公開しました。 https://github.com/mattya/chainer-gogh こんにちは、PFNリサーチャーの松元です。ブログの1行目はbotに持って行かれやすいので、3行目で挨拶してみました。 今回実装したのは”A Neural Algorithm of Artistic Style”(元論文)というアルゴリズムです。生成される画像の美しさと、画像認識のタスクで予め訓練したニューラルネットをそのまま流用できるというお手軽さから、世界中で話題になっています。このアルゴリズムの仕組みなどを説明したいと思います。 概要 2枚の画像を入力します。片方を「コンテンツ画像」、もう片方を「スタイル画像」としましょう。 このプログラムは、コンテンツ画像に書かれた物体の配置をそのま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
chatbox.blog is available for purchase - Sedo.com
The Blog | Welcome to Adobe Blog
Lingo: Design Asset Library, Brand & System Management
The Wolfram Language Image Identification Project
UIに枠線、角丸を適用する - Qiita
