デザインの現場系

本

デザインの現場あるある記事

運営しているクリエイター: ひとみ

なんかエラーが出ちゃって…

「エラーが出ちゃって…どうしたらいいですか？」こう聞かれると、聞かれている側は困ります。どう答えるのが最短最適なのか？エラーを消す方法だけ伝えるのか？なぜこのエラーが出たかまで教えたほうがいいのか？「こういった答えが欲しいです」という質問の仕方をすることで、自分でも何をしたいか明確になり、聞かれた方もどう答えればいいか判断がつきます。この順序で聞いてみよう❶何をしたくて ❷何をやって ❸どんな結果になったのか ❶起　❷承　❸転結って感じですね！ ❶何を

品質の高いcssを書くポイント

議題に上がりにくいcssの書き方ものすごく複雑なcssでも、表示が問題なければほぼ指摘されません。ましてや知識がない人、クライアントは指摘しないでしょう。コードレビューをしたくても、大抵時間がなくそのままという案件も多いので難しいところです。次に触る人のために引き継いだコードを見て何かしら「わぁ…＞＜」と思ったことはないですか？結構辛いですよね。次に触る人のために、保守性・拡張性の高いcssを書けるようにしましょう。基本ポイントを３つに絞りましたので是非覚えてくだ

Font Awesome v4を使いたい

この記事はこんな方向け・カンプ制作で、Font Awesome v4のものを使いたい・使いたいアイコンがv4にしかない・v4のドキュメントにたどり着けない Font Awesomeとは？商用利用が可能で、Webサイトやアプリケーション、WordやPDFなどのドキュメントに埋め込めるWebアイコンフォントです。画像を用意しなくてよく、必要タグとcssですぐ表示できます。 https://fontawesome.com/ 過去バージョンのログ https://fo

[テンプレ無料配布]サイト制作のヒヤリング、何を聞く？

この記事はこんな方向け・ディレクター初心者・クライアントと話すことになったデザイナーさん ❶制作の目的ビジュアルばかりを気にして迷走しないように、目的をしっかり決めます。ゴールが決まれば、ゴールするために必要なものも自ずと決まります。富士山の頂上まで登るには、この装備と水と…というイメージ。ゴールが決まっていなかったら何を準備ずればいいかもわかりません。曖昧なまま進めないで、一度は決めましょう。ゴールが誤っていたと気づいたら、その時に再設定・共有すればいいです。

アイデア・解決法の出すポイント３つ

この記事はこんな方向け・デザインのアイデアが出てこない… ・長時間調べて解決しない… ❶たくさんインプットして寝る夜まで頑張ってもアイデアが出なかったのに、翌朝ぱっと解決したりあの手があったか！となることはないですか？日中はたくさんの判断をして脳のメモリが減っているので、夜はアイデアが出にくいのです。なので、一旦寝るというか、潜在意識に任せます。寝たりお風呂でゆっくりしたときに、脳が色々整理してくれてるのです。潜在意識に任せるためにも、日頃インプットはたくさ

「インパクトが欲しいんだよね」

最近のwebサイトはめちゃくちゃすごい。デザイナーとエンジニアが協力し、素晴らしいアイデアが魅力的なビジュアルとタッチポイントとしてカタチになっている。マジでどんなコード組んでるんだ・・・これに感動して頭を動かす側の方は、総称して「インパクトある」そして自分達も「これがやりたい」と言ってきます。非常に困る。気持ちは分からないでもないですが、いや、分かりません。 “どういう意味の”インパクトなのか、分かりません。思わず辞書で引いてしまうほどです。インパ

スケジュール通りに進まない

明らかに無茶なスケジュールじゃないのに、予定通りに事が進まない…。どこでもwebでもあるあるです。ではなぜスケジュール通りにいかないのでしょう？私なりに原因を書き出してみました。これを治せば絶対大丈夫！とは言えないですが、少しでも現場の負担が軽くなってくれたら… ここでは“コーポレートリニューアル”の計画を例にしてみます。 ①共有しても認識されていない立てたスケジュールの共有はもちろんしてるとして、・相手がスケジュール、期限を重要と思っていない・多忙で見ても

コーディングで忘れがち、だけどやっておきたい3つのこと

この記事はこんな型向け・コーディング初心者・久しぶりの実装・工数を見積もるので参考が欲しい faviconの設定favicon（ファビコン）とは、ブラウザタブの左上についているアイコンのことです。 ●作り方 ①画像を準備する一辺260px以上の正方形PNG画像を作成します。 ②準備した画像をfaviconに変換するジェネレーターは検索するとたくさん出てきます。この記事では私がよく使わせてもらっているツールで説明します。 Favicon Generator.

web制作でのあるある著作権

この記事はこんな方向け・著作権がどんなものか知らない・具体的にアウトなことを知りたい「これ作ったの私！勝手に販売したり改造したりしないでよね！」と言えるのが著作権です。著作権は目に見えないので、検討する以前にスルーされたりします。クライアントに確認すると「えっダメなの？」となることも少なくないので、作る側は把握しておきましょう。 [×]有料ライセンス素材を含むデータを納品するデザイン制作で、ご自身の費用（もしくは会社の）を使ってAdobe stockなどで有

スマホで動画を自動再生させたい

この記事はこんな方向け・動画の自動再生方法がわからない・スマホで自動再生にできない動画を自動再生させたいという要望がよくあると思います。 videoタグを配置するだけなら簡単ですが、スマホでもとなると難しくなってきます。 videoタグ動画を自動再生する通常PCから見た時は、videoタグに属性「autoplay loop muted playsinline」を記入すれば自動再生がされます。 autoplay：自動再生 loop：ループ muted：無音 pla

駆け出しデザイナーさんに推したいデザイン本を紹介するよ

デザイン本をたくさん読んできた中で、特に・印象深い、記憶に残っている・現場、お仕事でたびたび思い出す・実践的という本をご紹介させていただきます。読むだけでメキメキデザインができるわけではないですが、原則や理由が分かるとアウトプットがしやすくなると思います。ノンデザイナーズ・デザインブック [第4版]第4版も出てるほど大人気、基本中の基本が詰まった1冊。 webデザイナー1年目の頃に先輩におすすめされて第3版を読みました。内容は大きく分けて3つです。・

DTPデザイナーさんが作成したaiカンプを、コーディングするときに知っておきたいこと

この記事はこんな方向け・DTPデザイナーさんのaiカンプコーディングのコツを知りたい・細部にこだわったコーディングを求められている・コーダーさんに詳細な指示を出したい元記事（以前私が投稿したもの）：https://qiita.com/cawmate_hitomi/items/7901dcae2f5a8adf7ffd DTPデザイナーさんからのaiデータをコーディングする機会がありました。 WebとDTPでは知識やこだわりが違うので、だいぶ衝突・・・・・ブラウザ

デザインが通らない・・・

この記事はこんな方向け・バナーやLPデザインの修正が多い… ・しかもガッツリな修正でテンション下がる… ・いろんなwebデザインを見て勉強してるつもりなんだけど… 作ったデザインが何度も何度も修正になるとモチベーションが下がりますよね。できれば修正回数を減らして、スッと納品したいものです。なぜデザインが通らないのか？どこかで決め手に欠けているからです。クライアントが具体的な方向性を持っていれば（もしくは目的達成のための具体案が共有できている）、あとはそれを可視化言語

デザインチェックのポイント

バナー、LP、サイトデザインなど、先輩デザイナー、ディレクターはデザイナーの成果物をチェックしますよね。その際の見るポイントをお伝えします。デザインチェックのポイント優先度は、 ❶情報が正しいこと ❷ユーザーが良いなと思うこと ❸クオリティが高いことです。作る・チェックする人の好み、クライアントが好きそうだからは基準にしません。最終的に見るのはユーザー・顧客だからです。「上司がこういうの好きだから」「クライアントが好きそう」と考えてしまうと、基準がそちらになっ