グリッドシステムのフレームワークを作ってみた

2023/11/30 29 users グリッドシステム フレームワーク 経緯 実装 納期

はじめに この記事では私が普段使っている、グリッドシステムを使ったレスポンシブなデザインカンプのフレームワークを紹介します。主にデザイナー初心者や1~2年程の経験者向けの内容です。 フレームワークを作成した経緯 私は仕事で主に所謂Web制作と言われるWebサイトのデザインと実装を両方やっており、業界的に納期... 続きを読む

無料コーディング練習所

2022/04/20 1825 users カリキュラム 入門編 上級編 基礎スキル 完全無料

『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。 入門編から上級編まで６サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。 デザインカンプと完成版コーディングデータ付きです。 さぁ、楽しみながら一緒に勉強していきま... 続きを読む

デザインカンプからのHTML/CSSコーディングの練習になる学習サイト | Webクリエイターボックス

2021/06/16 41 users 模写 コーディング CSSコーディング CSS 実務

2021年6月16日 HTML/CSSのコーディングの練習をするときに、既存のWebサイトの模写をする方もいらっしゃるかと思います。模写は模写で勉強になる点もありますが、実務ではデザインカンプと呼ばれるデータファイルを渡され、それを仕様にそってHTML/CSSでコーディングしていきます。実務に近いかたちに慣れるためにも、デ... 続きを読む

レスポンシブデザインに見るデザインカンプと実装との溝 - シフトブレイン／スタンダードデザインユニット

2019/08/26 92 users スタンダードデザインユニット グリッドシステム 実装 解釈

デザインカンプを基に実装する難しさはあらゆる場面で語られます。私の場合は特にレスポンシブデザインに関する仕様の解釈に悩む場面が頻繁にあります。 その問題点はどこにあるのでしょうか。私の制作したツールの紹介を通して、グリッドシステムのあり方やレスポンシブデザインの意味などを考察しました。 デザインカ... 続きを読む

Adobe XDでアニメーションのあるプロトタイプをデザインしよう | Webクリエイターボックス

2019/02/07 51 users プロトタイプ アニメーション Adobe XD アプリ 作成

2019年2月7日 Webデザイン, XD Webサイトのデザインカンプを画像として作成…というのはもう昔の話。最近ではアニメーションの伴ったWebサイトやアプリばかりで、それを画像で説明するのはなかなか困難です。Adobe XDを使えばアニメーションを含めたプロトタイプが作成できますよ！ 作成するもの 今回はAdobe XDを使って... 続きを読む

フロントエンドのコーダーの頭の中、デザインを見た時にどんなことを考えるのか | コリス

2018/06/19 125 users コリス コーダー 手がかり フロントエンド 実装方法

フロントエンドのコーダーがデザインを見た時にどんなことを考えるのかを紹介します。デザインカンプを手がかりに、そのデザインが意味する仕様上のさまざまな可能性やそれらを実現するための実装方法を考えるなど、コーダーとして最も楽しい時間の一つです。 Your Brain on Front-End Development 下記は各ポイントを意... 続きを読む

React Component 視点でのアトミックデザインの解釈といくつかの疑問 - mizchi's blog

2018/06/07 129 users React Component アトミックデザイン 解釈

2018 - 06 - 07 React Component 視点でのアトミックデザインの解釈といくつかの疑問 フロントエンドの中でも、JS書く プログラマ と、 CSS を書く マークアップ と、デザインカンプを作るデザイナで、 コンポーネント という概念がズレる。だいたいこれらが一人だったり兼任だったりで1~2レイヤーの開発ステップになるが、完全分業だったり人が多くなると混乱の元になる。 誰か... 続きを読む

Photoshopでデザインカンプやグラフィックデザインにおけるモックアップの作り方がよく分かるデザイン本 | コリス

2017/11/10 46 users コリス モックアップ Photoshop チュートリアル 英語

Photoshopでこんなのを作りたいなと思った時、Webで探すとそのほとんどが英語のチュートリアルで、作り方や細かいニュアンスなどが分からないことはありませんか？ 素材も英語圏内のものが多く、商用可なのか、ダウンロードしても大丈夫なのか、心配になることもあります。 デザインカンプやグラフィックデザインにおけるモックアップの作り方が詳しく解説された、そして素材もDVDで収録されたオールインワンの良... 続きを読む

【完全保存版】シートで簡単チェック！デザイナーが見落としがちなUIデザイン12の想定漏れ | それいけ！フロントエンド

2017/06/05 150 users フロントエンド デザイナー シート 完全保存版 エンジニア

こんにちは。フロントエンドエンジニアのほりでーです。 Webやアプリの開発ではデザイナーとエンジニアの連携が欠かせません 。デザイナーとエンジニアが分業する場合、デザイナーがPhotoshopなどのグラフィックツールで完成図となるデザインカンプを作成し、それを元にフロントエンドエンジニアが実装してWebサイトを完成させることが多いでしょう。 しかし、最近のWebサイトで多用されているリキッドレイア... 続きを読む

エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。 · GitHub

2017/03/03 263 users GitHub エンジニア デザイナー 欲しいこと

From-engineers-to-designers.md エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。 デザインカンプをコーディングするときに困りがちなことや、こうしてもらえるとすごく助かることなどをまとめています。デザイナーが他のデザイナーのデザインカンプを引き継ぐこともあるので、誰にとっても使いやすいデザインカンプを作ることは大切なことだと思います。 ... 続きを読む

実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita

2017/02/04 738 users Qiita リキッドレイアウト 実装 齟齬 カンフ

リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせ... 続きを読む

Photoshopで1クリックの時代がきた！Webページ用のグリッドも簡単に作成できる便利すぎる無料の機能拡張 -Bootcomp 2.0 | コリス

2016/08/10 332 users コリス Bootstrap グリッド Photoshop 時短

Webページやスマホアプリのデザインカンプを作成する時に、大幅な時短になる便利な機能がたくさん詰まったPhotoshop CC2015.5対応の機能拡張を紹介します。 Bootstrapでつくる時はもちろん、それ以外のデザイン作業でも強力な機能を発揮します。 Web制作に携わるすべての人が、入れておいて損はない機能拡張です。 Bootcomp Bootcompの特徴 Bootcompのインストール... 続きを読む

これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（後編） | MEMOPATCH

2013/04/25 172 users MEMOPATCH ワークフロー プロトタイプ 後編 前編

UIデザインの新しいワークフローを作るために長谷川恭久さんとの共同プロジェクトとしてスタートした“Patch Project”。導入部分として長谷川さんにお話頂いたワークフローの提案について「これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）」として記事にしました。後編となる今回は、デザイナーがするべき雰囲気のデザイン、また具体的なワークフローについての話をまとめて... 続きを読む

これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編） | MEMOPATCH

2013/04/19 424 users ワークフロー 長谷川恭久さん MEMOPATCH プロセス

先日、長谷川恭久さんとの共同プロジェクト、”Patch Project”がスタートしました。これはUIデザインの新しいワークフローを作るために立ち上がったプロジェクトです。これまでのワークフローを見直して、より良いUIを作っていくためにはどうするべきなのか、実際に何かのUIをデザインしながら模索していきます。そのプロセスや結果はどんどんオープンにしていきますのでお楽しみに！ まず今回はその導入部分... 続きを読む

イラレでWebデザインをされる方にお願いしたい7つのこと。 | とあるコーダーの備忘録

2013/02/22 394 users イラレ コーダー 備忘録 iLL Illustrator

とあるコーダーの備忘録 日々のマークアップ＆CSSコーディング業務の中で蓄積されていくちょっとしたノウハウとかバグ情報とかいろいろ備忘録的に記録していきます。 メニュー コンテンツへ移動 ホームセミナーのご案内書籍のご案内 普段はDTPをメインにやっていて、たまにWebのデザインもするというデザイナーさんは、 IllustratorでWeb用のデザインカンプを作ることが多いと思います。 別にIll... 続きを読む

ウェブを作るにあたって気をつけていること « vanillate

2009/10/12 373 users vanillate ブラウザチェック Photoshop

ウェブ（一般的にはホームページ？）のデザインをするときに、私は自分の中で一定のルールを持って設計するようにしています。そのほうが効率が良いし、デザインカンプ→コーディングの際にスムーズに移行できるからです。 ウェブ制作の流れとしては、photoshop(or fireworks)でデザインカンプを作る→画像のパーツ化→HTMLコーディング→ブラウザチェックの順番で行っています。本でもよく紹介されて... 続きを読む