デザイナーが下層ページを作るときに最低限おさえておきたい9つのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして、デザイナーのヴィクトリアです。 わたしが日々の業務でやらせてもらう機会の多い「下層ページのデザイン」。下層ページのデザインとは、主に先輩デザイナーが作成したトップページのデザインをもとに、文字どおり下層ページを作成すること。ページ数の多いサイトではよく手分けをして作業しますね。トップページのデザインを渡されたらまず、デザインをじっくり見て確認します。ここの考査を怠ると、下層ページが全然違うページに仕上がり修正の嵐になるわけです。 今回は、そうならないために気をつけたいポイントを備忘録としてまとめました。当たり前のことばかりですが、忘れないように気をつけたいです！ 確認するポイント 1. サイトの目的 下層ページから案件に入るときにまずおこなうことは、トップのデザインがどういう経緯でできあがったのかを知ることです。この経緯を知らないと、もとのデザインの意図とずれてしまい、戻しが
プロトタイピングツールでデザインの作業効率を上げる - astamuse Lab
アスタミューゼデザイン部のMatsumotoです。 ここ最近astamuse.comとastaIDのスマホ最適化の取り組みに合わせて、プロトタイピングツールを実験的に使い始めました。 ツールを使い始めてからまだあまり月日が経っていませんが、とにかく便利！ ストレスなく今までのデザインプロセスが改善しそう！ ということで、今回はプロトタイピングツールを使う利点や、実際のサービス開発において、どう作業効率がUPしたのかについて紹介させていただきます。 目次 プロトタイピングツール概要 ツールを使用するようになった経緯 ツールを使う目的 使ってみた3つのサービス比較 何が変わった？ まとめ 参考サイト プロトタイピングツール概要 そもそもプロトタイピングとは何？ プロトタイピング（Prototyping）とは、実働するモデル（プロトタイプ）を早期に製作する手法およびその過程を意味する。その目的は
【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由 | TechAcademyマガジン
【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由 Webサイトを作る上でグリッドデザインが良い理由について述べています。レスポンシブデザインなどデバイスに対応するWebデザインが主流になっていますが、これからWebデザイナーを目指している方は必見の内容でしょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を
Webデザイナーの仕事って何をするの？現役デザイナーが解説| 株式会社LIG
こんにちは、Webデザイナーのもりたです。 これからWebデザイナーを目指す人、またWebデザインへの興味を深めたい人向けにお届けしています、LIGデザイナー陣による連載「Webデザインをはじめよう」。第1弾となる前回は、「デザイナーの仕事は問題解決をすること」とご説明しました。 今回は「じゃあwebデザイナーが問題を解決するために、Web制作の中でどんな仕事をするの？」「Webデザイナーの仕事は具体的に何をするの？」という疑問にお答えしていきます。 Web制作のご依頼はこちらから Web制作の依頼をご検討の方はこちらへ 関わるひとたち Webデザイナーの仕事についてお話する前に、デザイナーの他にどんな人がWeb制作に関わっているのか見てみましょう。 Web制作には、ざっくり分けると4つの職種の人間が携わります。 Web制作に関わる職種 Webディレクター Webデザイナー フロントエンド
Webデザインで残業しない。デザイナーのワークフローを爆速化するAdobeツール | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの佐藤タカアキ（@sato_tkaaki）です。 最近、愛犬を飼いはじめてから、早く家に帰りたい日々を送っています。 そのためには仕事の効率化が必要不可欠。今回は残業なしで帰るためのワークフローについて書きたいと思います。 さて、Webデザイナーの皆さんは普段どんなツールを利用していますか？ 好みによってさまざまかと思うのですが、DreamweaverはCreative Cloud 2015になって、マルチデバイス対応サイト制作に便利な機能がたくさん追加されたそうです。 そこで今回はAdobe Creative Cloudで使えるサービスを活かして、サイトの制作ワークフロー別に作業効率化を図る方法をまとめてみました！ 1. ワイヤーフレームをサクッと制作しよう 最近では便利なワイヤーフレーム作成ツールが増えてきましたが、それでもまだまだこんな風に面倒なことが多いですよ
UIデザインワークフロー・ファイル管理考2015
はじめに NOTE: この記事は以下の条件上で考えた構成です Cocos2d-xでiOS/Android向けのゲーム このアプリは主に3人で作っており、UIデザイナー&グラフィッカー(自分)とフロント&サーバーエンジニア（以下、エンジニアと記述）の2人に絞った構成（もう一人はディレクター&プランナー） UIをどういう風に考えて作ったらいいのかという記事は多いけど、実務上どういうフローや画像管理を経て制作されているという具体的な事例があんまり出てこないので、もっとみんなどうやっているのか知りたい。というのがこの記事を書いた目的です。なので、ここで書いたことに対する質問・意見・自分はこうしている、みたいなことを記事に書いたりフィードバック欲しいなぁ…と思ってます。 個々の環境によってベストプラクティスが変わってくる部分だと思うので、こうすべきという内容ではなく、こういう風にしてみました、という
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
レスポンシブを前提にしたPhotoshopでのカンプ作成、ちゃんとできてますか？ - Tortoise Shell
レスポンシブを前提にしたカンプ作成、ちゃんとできてますか？ 変化の激しいWeb業界では、技術的変化やトレンドに合わせて現場でのワークフローも変わり続けています。 数年前まではPhotoshopやFireworksでしっかりとカンプを作りこんでスライスを切って、やっとコーディング…という流れでしたが、これも通用しなくなってきています。 今更書くまでもありませんが、今日ではエンドユーザーがWebを閲覧する環境も多様化しています。 そうすると、従来のデバイス毎にがっちりとカンプを作りこんで管理しておくというワークフローは無理が出てくるわけです。 今求められているのは、どのような環境からアクセスしても快適にコンテンツを見ることができるような、スケーラブル（拡張性のある）なレイアウトなのです。 そこで、カンプ作成の段階でもレスポンシブを前提としたワークフローの導入が必須になってきました。 とはいえ、
Webデザインと開発の未来
This document provides a summary of various web development topics and resources, including responsive design, Android fragmentation, Google services, Material Design, web components, and more. It discusses principles like universality and accessibility, and recommends actions like focusing on building interfaces in HTML/CSS directly instead of Photoshop. Links are provided to additional articles
ウェブデザインをめぐって議論するなら「Symu」 | ライフハッカー・ジャパン
疲れやすい、呼吸の浅さを改善。ストレッチポールは毎日使いたいほど気持ちがいい!【今日のライフハックツール】
自分のwebサイト作る工程 - MEMOGRAPHIX
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
『かわいいアプリデザインの法則＊GIRLS UP＊』
はじめまして。GIRLS UPでデザイナーをしています、アビン(GUPDesinger)です。 今回はGIRLS UPのデザインを元に、かわいい女性向けアプリのデザインの要素と作り方をお勉強しましょう！センスに自信が無い人でも、「かわいい」のロジックさえわかっていれば、簡単にかわいいアプリを作ることができると思います。そのロジックをぜひ参考にしてみてください！ まずはたくさんのキーワードを用意する。 よく「かわいいデザイン」って聞きますが、「かわいい」という言葉を聞いてイメージするものが、全ての人にとって全く同じとは限りません。 「かわいくて〇〇」をキーワードで表現する自分が持っている「かわいい」というイメージを表現するには、たくさんのキーワードで表現するとわかりやすくなります。 まずは、「20代の美を追求する人たちが使うアプリ」というテーマから連想する、〇〇に入りそうな言葉をたくさん並べ
[ブログ]祝！リニューアル！！ブログのリデザインをwebクリエイターボックスに依頼してみたよ！
Hello World with a Big Smile (^^) @conchikuwaです。 やっとこさブログのリニューアルをやりました！これで4回目のリニューアルです。 しかも今回はオリジナルテーマ！！世界に1つだけのブログだよ！ 前回使用していたテーマもものすごく気に入っていたのですが、有料テーマといえ、テンプレートなので、いつかはオリジナルテーマをと、その夢がついに叶いました！ そうはいってWebデザイナーでもないので、デザイン力は皆無に等しく、プロにお願いすることに。 で、白羽の矢を立てさせていただいたのが、今をときめくWebクリエイターボックスの中の人、@chibimana（マナ）さんです。以前からブログを読んでいて、もしリニューアルするならマナさんにお願いしようと心に決めておりました。今回お忙しい中、お受けしていただけて感謝です！ なのでリニューアルにあたりお願いしたこと、
![[ブログ]祝！リニューアル！！ブログのリデザインをwebクリエイターボックスに依頼してみたよ！](https://cdn-ak-scissors.b.st-hatena.com/image/square/aac74abd9bc37bf3dd52be5ae494a73fff216865/height=288;version=1;width=512/https%3A%2F%2Fwww.conchikuwa.com%2Fwordpress%2Fwp-content%2Fuploads%2Frenewal2-1.jpg)
【UI デザイン 練習用 - エアメール風】 - Webサイトのデザインをしよう
2014年8月17日 Photoshop, Webサイト制作, Webデザイン 「連載！実践で学ぶWebサイト制作ガイド」第四弾はAdobe Photoshopというツールを使って実寸のサイトデザインを作成します。Photoshopで説明していきますが、同様のグラフィックツールでもOK。Photoshopは体験版もあるのでぜひご利用ください。説明しやすいよう、簡単なデザインにしたつもりですが、すごく長くなってしまったような…。わかりにくくてすみません X( ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その4 目標：実際の幅にあったサイトデザインが作れる・Photoshopの基本的なツールを使った装飾ができる 必要なもの：Adobe Photoshop 対象レベル：Photoshopの基本的なツールの使い方がわかる 事前知識は以下の記事でおさらい！ これからP
レスポンシブWebデザインのワークフローと画面設計 (1/3)
本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 連載第1回で解説したレスポンシブWebデザインの概念に続き、今回からはシンプルなWebサイトを制作しながら、レスポンシブWebデザインの基礎を学びます。まずはサイト制作の流れと下準備について解説します。 従来のWebサイト制作では、PhotoshopやFireworksなどの画像編集ソフトを使ってデザインカンプを作成し、できあがったカンプを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザイナーが知っておきたいPhotoshopのPSDファイル、レイヤー、エフェクト、フォントやテキスト、素材の効率的な管理方法