信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

LIST OF ARTICLES

記事一覧

  • テクログ

    Atomic Designへの導入

    コンポーネント指向Vue であろうと React であろうと、コンポーネント指向という開発手段が主流になっています。コンポーネント指向とは一つの様々な機能やデザインからなるサイトが、同じ機能もしくはデザインの部分を一つの部品とし、それらの部品を組み立てることによって構成される開発のことです。バックエンドではオブジェクト指向が主流だと思いますが、フロントエンドだと見た目から直感的に切り分けやすいコンポーネント指向が開発の効率を大幅に上げることが可能です。Atomic Designその中で、コンポーネント指向の一つの設計方法として Atomic Design が上げられます。Atomic Design は UI の要素を原子(Atoms)分子(molecules)有機体(organisms)テンプレート(Templates)ページ(Pages)の5つの階層に分け、最終的なUIとUIの基礎となるものを同時に作成する設計方法で、アメリカのWebデザイナーブラッド・フロスト氏によって提唱されました。イメージとして以下の図がわかりやすいと思います。(出典:https://qiita.com/croco_works/items/e34d1b0c0e50b37031d7)ここで一つの疑問が思い浮かぶと思います。それぞれどの粒度が atoms、molecules、organisms、templates、pages になるのか?粒度の決め方実際には Atomic Design のそれぞれの階層の粒度に関して明確な定義があるわけではない。言い換えれば、これから進めるプロジェクトの粒度は自分もしくはチーム自身で決めることができます。ゆえに、Atomic Design で開発を進めるときは最初の段階でデザイナーとプログラマーが一緒に話し合って、お互いの納得のいくような階層の粒度にして設計書を作るのが最も効率的である。とはいえ、指標がないとなかなか決めるのも難しいですので、僕からそれぞれの階層の定義をここで提示して、粒度決めに役立てればいいなっと思っています。こちらはあくまでも自分がネットで情報を収集して、自分で考えて定義したものなので、一つの考え方として受け止めてください。原子(Atoms)       それ以上UIとしての機能性を破壊しない最小要素分子(molecules)     複数の atoms が一緒になり最小限の機能を構成するグループ有機体(organisms)    インターフェイス上明確な区分を形成するために複数の molecules が集まったグループテンプレート(Templates) データを流し込む前の organisms から構成されるサイトの枠組みページ(Pages)      templatesにデータを流し込んだサイトの完成品

  • 画像:ブログサムネイル

    テクログ

    UIデザインのススメ

    マークアップエンジニアのひこです。たまにデザインを作ったりもするのですが、最近特にグラフィックデザインとUIデザインの違いみたいなものを感じています。かっこいいデザイン、きれいなデザイン、使いやすいデザイン・・・色々ありますが最終的には「サイトの目的達成」が一番重要かとおもいます。「商品を買ってもらう」「問合せしてもらう」「会員登録してもらう」などなど・・・。目的がわかると何を重視すればいいかがわかってくるので、ビジュアルを優先するのか操作感を優先するのかetc・・・。ビジュアルを優先する時はターゲットの性別・年齢・タイプなどを決め、対象者に人気のある類似サービスなどからヒントを得られますが、操作感を優先するとなるとどうすれば操作感が良くなるかがなかなかわかりません。そんな状態だったので勉強の為に本を1冊買ってきました。D.A.ノーマン著 誰のためのデザイン?結構分厚くて専門用語も出てくるので、読むのにかなりのカロリーを必要としました。が、これを読むと「なぜこのデザインは使いにくいのか」を言語化することができるようになってきます。まだ1回しか読んでいないので理解度もまだまだですが、リピートして完全に理解できるようになりたいと思えるいい本でした。オススメです!

  • 画像:ブログサムネイル

    テクログ

    料理の写真を美味しそうに補正するコツ

    こんにちは。頑張ったコーポレートサイトが無事リニューアルできて嬉しいデザイナーのキャンベルです。よろしくお願いいたします。今回は、料理の写真を美味しそうに補正するテクニックについて書いてみます。コチラが元画像。牛フィレ肉のコトレッタ(カツレツ)赤ワインのソース。昨年のクリスマスディナーのコースの中の一品です。サンタが来ない大人クリスマスの楽しみといえばプロの料理を堪能することがメインになってしまいますね。さて、この写真をもっと美味しそうに見えるように補正してみましょう♪まず、料理の写真で大事なのが明度と彩度です。料理は見ただけで「わ~美味しそう!」と思わせたもの勝ちだと思うので美しく見える明るさと鮮やかさに整えてあげます。レベル補正で少し明るくしました。若干、トマトの色がわざとらしい赤になってしまった感があるので、気持ち彩度を下げて自然な色に修正。次に、被写体のメインがどこにあるか、というのを考えます。料理や細かいものの写真は、最も見せたい部分をクリアに描写してその他のエリアはボカすと、とても雰囲気が良くなります。この料理の最も見せたい部分は…このへん!(赤でない部分)このクリアに見せたい部分にシャープをかけ、逆に見せなくて良い奥の部分をボカシます。すると、こんな感じでグッと奥行きのある写真に。ルッコラの葉がシャキッと見えるようになり、カツレツの衣がサックサクな感じを意識してあげると、質感が際立ってイイ感じになるんです。あとは、ルッコラの葉の彩度を少しだけ上げて新鮮さをアピールし…全体的に温かみのあるトーンに整えて完成です!比較してみると、差がおわかりいただけるかと思います。ウソをつくのではなく、より被写体の魅力を引き出すのが写真補正です。最近は補正に関してはアプリで簡単になかなかのクオリティーで出来てしまいますし、デザイナー泣かせの便利な世の中になりましたがなんだかんだで写真の良し悪しを決定付けるのは構図だったりします。構図については、きっちりとした正解理論があるにはありますが、写真を撮る一瞬でそれを判断してフレームに収めるには、理論だけではない感覚とセンスが必要になります。これを鍛えるには、とにかく良い作品を見まくること。脳みそと視覚に焼き付けていくと、バランス感覚が鍛えられていく気がします。スマホのカメラが優秀なせいで、すっかり出番をなくしてインテリアの一部と化している、重くて嵩張るデジ一眼を横目に見ながらたまには一緒にフラッと出かけてのんびり撮影したいなぁと思ったりする今日この頃でした。