UIデザインで中央配置がずれてしまう理由と解決方法

2024/05/30 146 users UIデザイン 中央配置 デベロッパー 理由 解決方法

UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを... 続きを読む

ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり

2024/04/27 103 users テンキー ウェブページ 挙動 数値 ウェブページ上

ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみま... 続きを読む

iPhone, iPadの最新機種まですべてを網羅、Appleデバイスのスクリーンサイズ・解像度のまとめ -Screen Sizes

2022/09/13 19 users iPhone ppi のっち Screen Sizes 解像度

Webサイト制作者・スマホアプリ開発者向けに、iPhone, iPad, Apple WatchなどのAppleデバイスのスクリーンサイズ、各サイズを採用しているモデル、ノッチのサイズ、解像度、PPI、表示タイプ、比率、セーフエリア、ウィジェットのサイズなど、実装時に役立つ情報がまとめられたScreen Sizesを紹介します。 2022年の最新モ... 続きを読む

ファイル書き込みをするプログラムで気をつけた方がよいこと | IIJ Engineers Blog

2022/07/06 378 users IIJ Engineers Blog プログラム ファイル

この記事について この記事では、ファイルに書き込みを行うプログラムを実装する時の注意点について説明します。 ファイル書き込みは、プログラミングにおいて比較的よく利用される機能でありながら、実装時に注意していないと、システムクラッシュ（意図しない電源の喪失や OS のクラッシュ等）後にファイル上のデータ... 続きを読む

昔の写真を一発で修復するAIフィルター　アドビが先行発表　「Photoshop」向けに開発中

2022/06/14 16 users アドビ Photoshop 復元 先行 クリエイティブ製品

アドビは、「Adobe Creative Cloud」のアップデート発表。Photoshop向けの新機能として「写真を復元」を先行発表した。 アドビは6月14日、同社のクリエイティブ製品「Adobe Creative Cloud」のアップデートを発表。その中で「Photoshop」向けの新機能として「写真を復元」を先行発表した。現在開発中としており、実装時... 続きを読む

デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ

2022/03/31 60 users ケアレスミス 検出 スレ node.js HTML

デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ ウェブ制作において、デザインとHTML実装の一致はエンジニアとして当然求められるものです。とはいえ、デザインツールとブラウザ画面をにらめっこしながら確認するのも大変です。本記事ではNode.jsで動くヘッド... 続きを読む

全部まとめられていて便利！iPhone, iPadなど、Appleデバイスのスクリーンサイズ・解像度のまとめ -Screen Sizes | コリス

2021/05/17 225 users ppi iPhone コリス Screen Sizes 解像度

Webサイト制作者・スマホアプリ開発者向け、Appleデバイスのスクリーンサイズ、各サイズを採用しているモデル、解像度、PPI、表示タイプ、比率、最後にサポートされたOS、セーフエリア、サイズクラス、ウィジェットのサイズ情報など、実装時に役立つ情報がまとめられたScreen Sizesを紹介します。 先週ローンチされたば... 続きを読む

Next.js API Route の実装時に同じファイルでクライアントコードも実装すると嬉しい…

2021/01/08 23 users pages ROUTE Prisma クライ ユニバーサル

tl;dr API Route でクライアント用のコードも一緒に実装すると型安全に実装しやすい ただしセキュリティは気をつけてね 発想 Next.js から Prisma ORM を利用する という記事で、 Next.js の getServerSideProps で prisma のコードを使う例を紹介しました。 これは pages というユニバーサルなエンドポイントで、クライ... 続きを読む

Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説 | コリス

2020/11/12 1084 users レンダリング CSS コリス HTML JavaScript

ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログ... 続きを読む

CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック | コリス

2020/07/16 171 users テクニック コリス ロゴ画像 参考 CSS

ロゴ画像のようにさまざまなサイズ、さまざまな形の画像を美しく揃えて配置するスタイルシートのテクニックを紹介します。 CSSのテクニックだけでなく、デザイン上の注意点も解説されており、実装時の参考になります。 Aligning Logo Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログで... 続きを読む

CSSは奥が深い！Facebookの新しいUIデザインで見つけたCSSのテクニックのまとめ | コリス

2020/04/28 24 users Facebook コリス CSS 制約 テクニック

先月からエンドユーザーに段階的に適用され始めたFacebookの新しいUIデザイン、そこで見つけたCSSのテクニックを解説した記事を紹介します。 CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの制約による実装時などの参考になると思います。 CSS Findings From The New Facebook Design by Ahma... 続きを読む

Rails6の複数データベースの仕組みと実装時にハマったところ - dely engineering blog

2019/12/14 33 users Rails6 dely engineering blog

こんにちは、開発部の高橋です。 本記事はdely Advent Calendar 2019の14日目の記事です。 昨日はミカサ(acke_red)さんの「デザイン負債を返済する - クラシルのデザインの展望2020」という記事でした。 dely.design はじめに 10月の半ば辺りにRails6の複数機能を利用し、master/slave構成に対応した新規アプリケーショ... 続きを読む

LINE、メッセージの「送信取り消し機能」を12月以降に実装へ - CNET Japan

2017/11/16 10 users 実装 送信取り消し機能 CNET Japan line 誤爆

LINEは11月16日、コミュニケーションアプリ「LINE」において、送信したメッセージを時間限定で取り消せる機能を12月以降に実装すると発表した。 当初対象となるメッセージは、24時間以内に送信したメッセージとなる予定。以降は、ユーザーの反応を見ながら対応を検討するという。なお、同機能の詳細については、実装時に通知される。 同機能の提供にともない同社が実施した、「LINEの誤爆」に関する調査（L... 続きを読む

プレビューで簡単！CSSアニメーションがブラウザ上で作れる「animista」 | DesignDevelop

2017/04/01 58 users DesignDevelop プレビュー アニメーション 箇所

Webデザインを彩るCSSアニメーション。実装時にはデザインのイメージに合わせて、細かな調整を加えたり、なかなかに手間がかかる箇所でもあります。そんな手間がかかる調整工程を省ける、ブラウザ上でアニメーションが作れるツール「animista」を今回は紹介したいと思います。 ブラウザ上でプレビューしながら細かな動きを調整して、タグをコピペするだけでCSSアニメーションが実装できる便利なツールです。 詳... 続きを読む

どのようにして高速に iOS アプリの UI を作り上げるか：動作モックの活用と実装時の UI 作りこみ - クックパッド開発者ブログ

2016/04/20 207 users モックアップ iOS モバイルアプリ 多田 モックアップ作成

Holiday デザイナーの多田です。 皆さんは Web アプリやモバイルアプリを開発する時、モックアップ作成にどれだけ時間を割いているでしょうか？もしくはモックアップを作成せずにすぐに実装に入るでしょうか？私はこれまで Web アプリ開発ではいきなり実装に入ることが多かったのですが、 Holiday iOS アプリ の開発では Web アプリの時のように上手くいかないことに気づき、やり方を考え直... 続きを読む

Web制作者はおさえておきたい！CSSの基本テクニックから実務に役立つ便利ツールまでのまとめ | コリス

2015/03/18 388 users 圧縮 各プロパティ 箇所 コリス コード

さまざまなUIを実装するCSSの各プロパティの基礎知識や使い方をはじめ、実装時のスタイルシートの問題点をチェックしたり、重複している箇所を見つけたり、見やすいように整形したり、コードを圧縮・展開したりなど便利なオンライン...記事の続きを読む 続きを読む

よく使うC++のイディオム 「NVI」と「RAII」 （1/2）：CodeZine

2013/08/22 44 users CodeZine NVI イディオム How What

アプリケーションを作るには、"何をつくるか（what）"、そしてそれを"どうつくるか（how）"を考え、しかるのちそれがコードとして書き起こされます。コーディングの段階では"いかにコンパクト/エレガント/堅牢につくるか"などを考慮した実装デザインがその後のデバッグや拡張/変更/保守に大きな影響を及ぼします。実装時のちょっとした工夫：NVIとRAIIについてざっくりと解説します。 NVI：Non v... 続きを読む

ケータイシミュレータなんて使ってないで Moxy 使えばいいのに - tokuhirom's blog.

2012/08/09 16 users TOKUHIROM moxy aID codezine.jp

http://codezine.jp/a/article/aid/1352.aspx この記事よんでマトモにうけとる人がいるといけないので一言いっておくと、ぶっちゃけケータイシミュレータは出来がよくありません。シミュレータ使うぐらいなら実装時から実機使った方がマシです。そもそもキャリヤ側にしてみればシミュレータを作りこんでも儲からないのでやる気がないんじゃないかと邪推しています。実際には Fire... 続きを読む

HTML5のタグリファレンスの本やスマフォアプリを探してる人にぴったりな一冊 -標準HTML5タグリファレンス | コリス

2012/01/12 30 users XHTML コリス 相違 最終草案 勘違い

手頃なサイズで気軽に調べることができるHTML5のタグリファレンスを探している人にぴったりな一冊を紹介します。 小さいながらもHTML5の最終草案に対応したタグリファレンスだけでなく、HTML4, XHTMLとの相違、実装時のよくある間違い・勘違いなど、制作に役立つ知識も網羅されています。 『標準HTML5タグリファレンス』は2011年5月25日にリリースしたHTML5最終草案をベースにしており、... 続きを読む

リッチインターネットアプリケーションの実装時に検討したい30のUI | コリス

2009/01/30 259 users リッチインターネットアプリケーション charts コリス

日本でも近日発売の「Designing Web Interfaces」から、リッチインターネットアプリケーションを作成するための30のユーザーインターフェイスを紹介します。 30 Essential Controls サンプルは、一部jQueryベースのものに変更しています。 01. Auto Suggest Google 02. Carousel jCarousel 03. Charts & G... 続きを読む