デザインデータとコードを一体のものとして捉える - Qiita

2023/11/21 8 users Qiita 一体 コード

発表の際に使ったスライドと台本をそのまま記事にしています。 そのため、表現が口語的な部分もありますがご了承ください。 できるだけ、Web でもネイティブアプリでもクロスプラットフォームでも共通する話にしようと思っていましたが、筆者の知識が Web に偏っているので内容も Web 寄りです。 自己紹介と導入 みなさ... 続きを読む

【入門編】カフェサイトのコーディング練習 | 無料コーディング練習所

2022/04/26 6 users 入門編 zip レスポンシブ対応 ダウンロード 4MB

無料コーディング練習所【入門編】の学習ページです。 シンプルなカフェサイトのトップページを作ってみましょう。レスポンシブ対応もします。１ページのみです。 「デザインデータ」と「完成版コーディングデータ」を無料でダウンロード可能です。 デザインデータ（XD/5.4MB） 完成版コーディングデータ（ZIP/328KB） ... 続きを読む

GitHubとは？使い方や知っておきたい知識を解説！｜ IT・エンジニア派遣のModis

2020/05/26 11 users GitHub MODIS ギットハブ 過言 人々

今や開発者にとって欠かせない存在といっても過言ではないのが「GitHub（ギットハブ）」。これは、世界中の人々がプログラムコードやデザインデータを保存・公開できるソースコード管理サービスのことです。今回は、GitHubとはどんなものか、どんな使い方をするのかみていきましょう。 GitHubとは GitHubという言葉を分... 続きを読む

line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 | Blog | YUYA KINOSHITA

2020/04/22 20 users line-height 余白 コーディング 上下 実装

Webサイトのコーディング（実装）では、デザインデータ通りの数値を反映しているにも関わらずブラウザ上の表示がデザインデータと比べてずれる（余白が大きくなりすぎる）場合があります。 これはブラウザのline-heightの仕様によるものですが、line-height制御の難しさがデザインデータとコーディング後（ブラウザ表示... 続きを読む

コーディングを助けるためにデザイナーができること | knowledge / baigie

2020/03/26 20 users Knowledge baigie ペイジ コーディング 高島

デザイナーの高島です。 ベイジには2019年4月に入社しました。webサイトや業務システムのUIデザインを主に担当しています。『knowledge / baigie』でも、デザイン関連の情報を発信していきたいと思います。 デザインツールで制作したデザインデータをコーディングする時、「デザイン通りになっていない」「ルールに一貫... 続きを読む

エンジニアでも知っておきたいデザインの基礎知識 - Qiita

2019/10/05 405 users コーダー Qiita ワイヤーフレーム コーディング 以下

→ English 対象読者 ワイヤーフレームだけが渡されてコーディングしなければいいけないようなケースで役立つ知識を紹介します。 以下のような環境にいるエンジニアは読む必要はないと思います。 毎回デザイナーからデザインデータが用意されて、それを忠実に再現すればよい そもそもコーディングはコーダーがやってくれ... 続きを読む

デザインのバージョン管理をGitHubでしてみたら修正点が3秒で分かるようになった話 | Money Forward Engineers' Blog

2018/01/23 234 users GitHub Abstract きっかけ 大橋 デザイナー

こんにちは。デザイナーの大橋です。 今日は、私が担当している “（しら）ずにお金が（たま）る”自動貯金アプリ『しらたま』 で導入してました、デザインのバージョン管理の話を紹介します。 デザインのバージョン管理といえば、 Abstract や Kactus がありますが、今回はあえて Git Sketch Plugin を試してみました。 デザインデータをGitHubで管理しようと思ったキッカケ 私... 続きを読む

デザインデータのバージョン管理ができるAbstractを試してみた✌ | UXデザイン会社Standardのブログ

2017/02/10 145 users Abstract Sketch チャット デザイナー データ

複数人で1つのデザインデータを編集していると、突き当たるのが「どうやってマージするか問題」です。 作業人数分のデータを複製して用意したり、「これから◯◯.sketch触ります。開かないでください 」とチャットで周知したり……そんな経験をした方も多いのではないでしょうか。 そんなデザイナーの悩みを解決してくれるのが、今回紹介する Abstract です。 Abstractとは Abstractはアメ... 続きを読む

効率的なアプリ開発のためにデザインガイドラインを作成した話 - VASILY DEVELOPERS BLOG

2016/02/02 155 users DESIGN VASILY DEVELOPERS 実装 方々

2016 - 02 - 02 効率的なアプリ開発のためにデザインガイドラインを作成した話 Design こんにちは。デザイナーの権です。 アプリ開発に関わるデザイナーの方々は、仕様とデザインが決まって実装に移る際、どのようにチームでやりとりしていますか？ それぞれの開発体制や状況に合わせて進めていくので、会社によって様々だと思います。弊社でも効率的な開発のために、デザインデータや仕様書、指示書、プ... 続きを読む

多言語・マルチデバイス対応のpairsを、チームでデザインするためのデザインデータ管理方法とは？ | eureka tech blog

2015/12/06 3794 users pairs エウレカ デバイス リードデザイナー デザイナー

はじめまして。デザイナーの原です。エウレカの自社サービス「pairs」でリードデザイナーをしています。 さて唐突ですが、自社サービスを開発・運営している会社では、 「デザインデータはどう管理してるの？」 と、きっと気になっている人もおられるのではないかと思います。私は正直気になります。いろいろな企業に聞いてまわりたいです！ pairsで展開しているデバイスは、「Web版PC」「Web版スマートフォ... 続きを読む

「単純作業は機械に任せて、人間は創造的な仕事を」自動コーディングはWeb制作の世界を変えるのか？—AUTOCODINGインタビュー | SEKAI LAB TIMES（セカイラボタイムス）

2015/06/04 97 users セカイラボタイムス SEKAI LAB TIMES 機械

アプリ＆Webサービス企画 「単純作業は機械に任せて、人間は創造的な仕事を」自動コーディングはWeb制作の世界を変えるのか？—AUTOCODINGインタビュー デザインデータをもとに自動でHTMLを生成してくれる、自動コーディングツールのAUTOCODING。通常4時間程かかるようなコーディングもたった5分程度で仕上がってしまうと言います。しかもクオリティは人間がやった場合と比べて遜色ないとか。こ... 続きを読む

縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」 | Web制作ならWebNAUT

2015/01/08 993 users デザイナー やりとり ディレクター 正月 ディレクターさん

明けましておめでとうございます！ 特に正月らしい内容ではありませんが、Web制作の各場面で使える「痒い所に手が届く」ツールを紹介させて頂きます。 デザイン確認時によくあるやりとり デザイナー： トップページのデザインデータが出来ました！1枚画像に書き出しましたので確認をお願いします。 ディレクター： ありがとうございます！確認し修正点などあれば指示致します。 ここでディレクターさんはデザインの確認... 続きを読む