注目のストーリー
デザイナー
webデザイナーの仕事領域
「このデザインを作って欲しい」そう言われた時、デザイナーのみなさまはまず何から始めますか？弊社ロジカルスタジオの中でも参考資料集めをする人、コンセプトの提案資料を作る人、ムードボードを作る人など様々います。しかし、いきなりデザインを作るぞ！と手を動かし始める人はあまり見かけません。私もいつの間にかそれを当たり前としていましたがwebデザイナーの仕事領域って、どこから始まってどこで終わるんでしょうか。デザイナーとは、その名の通りデザインをする人のことですがメールを送る時、資料を作る時、スプレッドシートで表を作る時などデザイナーでなくても無意識のうちに情報を見やすく工夫するかと思います。デザ...
Photoshopの「描画モード」について理解しよう！
photoshopの描画モードについて理解しよう！photoshopの描画モードについて理解しよう！社内で年賀状のコンペがあった時に、「何か物足りない・・・」ということで先輩デザイナーに相談したところ、「上から何かテクスチャをかけてみたら？」とアドバイスを受けました。【社内コンペについてはこちらをご覧ください！】というわけで、「描画モード」を使うことに。描画モードは趣味でイラストを描く時にちょっと触ったことがあるくらいで、詳しくは知りません。しかも、いつも使う時は順番に選択してなんとなく「いい感じ」になるものを選択していました。（非効率的・・・）というわけで今回は「描画モード」について深...
社内年賀状コンペを行いました！〜2022〜
【2022年】年賀状デザイン案を社内で募集した結果！集まったデザインを一つずつ見ていこう！Aのデザイン主催者からのコメントカラーのチョイスや文字が多いけどグラフィカルですごいな〜と思いました！採用おめでとうございます！デザイナーAさん左右対称でかっこいいデザインだと感じました。細かい部分ですが、2021の囲みが「新年」の左右にツラが合っていない2021の囲みと、左右の斜め線の角度が合っていない惜しく感じました。あと、「A HAPPY NEW YEAR」のYEARとAが繋がっているのでスペルミスのように見えます。グレーのフチも浮いて見えるので無くすか色を変えるとよくなるのではと思いました。...
Webエンジニア・Webデザイナー必見！Web開発現場で使われている、便利なWebサービス・サイトをまとめてみた
今回は、Webの開発現場で使われている、WebアプリとWebサイトを調査してきました。大まかな内容として、以下の３つの項目でご紹介していきたいと思います！・生成系Webアプリ・整形系Webアプリ・デザイナーおすすめWebサイト生成系Webアプリ【パスワード生成（パスワード作成）ツール】最初にご紹介するのはパスワードをカスタムして、生成できるWebアプリです。このWebアプリが便利な点は、「任意の文字数で作成」「記号なしで作成」といったパスワードをカスタムできるところにあります。業務ではパスワードを設定することが頻繁にあるので、このアプリでよくパスワード生成しています！パスワード生成（パス...
【つくってあそぼう：02】モーションロゴ
ロジカルスタジオでも、動くものを作ることが最近増えました。動画制作や、ちょくちょく3Dも弊社では取り扱うことがあります。最近では当たり前になってますが、WEBでのアニメーションもですね。先日、社内で、コーポレートサイトのローディング画面に「モーションロゴ」をつけてみようという試みのもと、モーションロゴ社内コンペがおこなわれました。私も、動画に関しては撮影の編集とかコンテしか作ったことないけど、満を辞して参加です。今回も、その制作過程を備忘録として書いていきます。早速、なんとかなるだろう精神のもと、ダウンロードしたまま起こすことのなかったAfter Effectsを起こしました。おはよう。...
デザインガイドラインを読み解き、デザインシステムに活かす。
Web制作では、ページが複数あってもユーザーを混乱させないために、 全ページにおいて「デザインルール」が用いられます。それらは「スタイルガイド」「デザインシステム」などとも呼ばれ、これらのルールをもとに制作が進められます。ルールを作成する際、特に参考にされるものが、「デザインガイドライン」です。デザインガイドラインってなに？デザインガイドラインは、AppleやMicrosoft、Adobeなど、多くの企業が公開しています。デザインガイドラインとは？ その名のとおり、デザインを進める際の指針のことです。対象のプラットフォームにおけるデザイン原則やレイアウトや色、インタラクションなどに関する...
【つくってあそぼう：01】noteのヘッダー
あっという間にGWですね。４月から新入社員が入ってきて会社がにぎやかになってきました。私が新入社員で、デザイナーとしてのはじめての仕事は社内の採用パンフレット作りでした。数年経っても社内のデザイン業務を時たまします。ということで、今回は社内のnoteのヘッダーをつくりました。折角自由にデザインさせてもらったので、コンセプトや作業方法を書いていこうと思います。01.コンセプトを決める「色々書いていいよ！」の元、デザイナーやディレクターが様々な内容を書くので、「雑多」「集合体」とかを最初にイメージしました。ここからは連想ゲームです。で、自分の中で出たコンセプトが「マンションの窓」です。いろん...
デザインチームで、noteはじめました。
こんにちは。ロジカルスタジオ・デザインチームです。日に日に暖かくなってきましたが、お元気ですか。この度、私たちデザインチームで、noteを始めました。ぜひ、見にきてください。noteってなに？noteとは？noteはクリエイターが文章や画像、音声、動画を投稿して、ユーザーがそのコンテンツを楽しんで応援できるメディアプラットフォームです。だれもが創作を楽しんで続けられるよう、安心できる雰囲気や、多様性を大切にしています。 この「街」のようなサービスでは、普通のひともプロのクリエイターも、企業も、あらゆるひとが好きなものを見つけたり、おもしろい人に出会えたりするチャンスが広がっています。あな...
リモート中の昼休みを刺激的に！？噂のホラーゲーム（44 Minutes in Nightmare）プレイ日記
最近リモートワークで昼休憩を持て余してがちでもあります。困ったぞ。自宅での1時間の昼休憩って意外と何をするか迷うんです。冬だと余計動きたくないし、お散歩にでようも外が寒くて…筋トレやヨガとか運動は正直苦手だし…ドラマや映画を見ても1時間じゃおさまらないからもどかしいとも思ってしまいます…あ～～～～～運動以外で外に出ずにいい感じの時間で楽しめそうなことできないかな～～～～～～っ！！44 Minutes in Nightmareとは？2020年末にSteamで配信されてはじめたインディーズのゲームで、44分以内にクリアできなければ強制的にゲームオーバーするホラーゲームだそうです！昼休憩を刺激...
【デザイン史】欧文書体の歴史を学ぶ
こんにちはハマーです！デザイナーとして入社して、早くも半年が経ちました。早すぎです。憧れの職業に就き、様々な仕事を経験させていただくうちに、段々、ものの見方が変わってきました。駅の案内表示やサイネージや吊り革広告、本やパンフレット、WEBサイトやアプリなど、私たちの身の回りは、設計されたもので溢れています。これまでは「全体的に洒落てる」「書体がかっこいい」「この表現はどうやって作ってるんだろう」など、その物を全体で捉えていたのですが、最近は「この大きさの写真をいれる時は、この配置もアリなんだ」「こういうあしらいを使う時は、こんな見出しも使えるんだ」「この帯に使われている黒、黒すぎずグレー...
PixiJSで歪みやノイズなどのフィルターを使って表現の幅を広げる。
今回は題目通り、「フィルター表現の幅を広げる」ということで、PixiJSを用いて、フィルター表現を試していきたいと思います。シェーダーをいじらないとできない表現が簡単にできるので、知っておくと便利です。フィルターの記述PixiJSでフィルターをかけるのは簡単で、記述は下記の通りです。フィルターのパラメーターはそれぞれのフィルターによって様々なので、リファレンスを参照してください。const noiseFilter = new PIXI.filters.NoiseFilter(); //ノイズフィルターnoiseFilter.noise = 0.8; //ノイズの大きさnoiseFilte...
【現役デザイナーが厳選】Webデザインで参考にしているギャラリーサイト8選
こんにちは、ロジカルスタジオのWebデザイナー、ドラゴンです。いきなりですが、みなさんはWebサイトをつくるときに参考にしているサイトはありますか？優れたWebデザインにはたくさんの参考デザインを見ることが欠かせません。とはいえ世の中にはWebサイトが星の数ほどあり、それらの情報を全て追いかけるのは現実的ではありませんよね。そんな時にはギャラリーサイトと呼ばれるサイトを見るのがおすすめです。良いデザインが定期的に更新されるので、ラクして効率的に良いデザインに触れることができます。私も毎朝チェックするようにしています。そこで今回は、数あるギャラリーサイトの中から個人的なおすすめサイトを8つ...
乗算などのブレンドモードはCSSの「mix-blend-mode」で解決
はじめまして、ロジカルスタジオでフロントエンドエンジニアをしておりますノートです。早速ですが、この間、調子に乗っていて大ハマりしたことがあります。例えば、このようなデザインデータがあったとして、「うわあ。background-colorが透けてるように見えるぜ！opacity!opacity!」と言いながらdivにopacityをかけてあげます。ちなみにこの綺麗な盛りつけのサラダは僕が盛りつけたもので、謎に社内で酷評されていましたが、めげずに引っ張り出してきました。それはおいておいて、余裕綽々とdivにopacityをかけてあげた結果がこちら。続きはロジカルスタジオオフィシャルブログから！！
