無料コーディング練習所

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

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

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

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レイヤーの開発ステップになるが、完全分業だったり人が多くなると混乱の元になる。 誰か... 続きを読む

【完全保存版】シートで簡単チェック！デザイナーが見落としがちな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コーディング→ブラウザチェックの順番で行っています。本でもよく紹介されて... 続きを読む