タグ

ブックマーク / liginc.co.jp (18)

  • 【実例付き】Photoshop(フォトショ)のスーパー解像度の使い方・注意点| 株式会社LIG

    こんにちは、Webデザイナーのまっつーです。 フォトショ(Photoshop)のスーパー解像度の使い方について、実際の画像をお見せしながらわかりやすく紹介していきます。 この記事を読めば「提供された画像の画質が悪い…」「古い写真を使いたいが画質が悪い…」といった悩みが解決できます。 Photoshopのスーパー解像度とは 「スーパー解像度」とは一言でいうと、AI技術で画像の解像度(画質)を格段にあげることできる機能です。 2021年Adobe Camera Raw v.13.2に追加された新しい機能で、Adobe Senseiという人工知能AIが細部を自動的に補完し鮮明な画像に処理してくれます。(似ている機能で「ディテールを保持2.0」というものがありますが、期待できる効果は「スーパー解像度」の方が高くなります。) この機能を使うと画像の解像度は縦横それぞれ2倍のサイズになり、全体の解

    【実例付き】Photoshop(フォトショ)のスーパー解像度の使い方・注意点| 株式会社LIG
  • Photoshopで斜めになった写真を補正する方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。デザイナーの白浜です。 せっかく撮った海の写真・・・でもなんだか水平線が斜めってる・・・。 建物のラインとか地平線とか水平線とか・・・ここがまっすぐだったらもっとかっこいいのに!ってことよくありますよね? そんな時、Photoshopを使えば一発でまっすぐにできちゃいます。 今回はその手法をちょこっとご紹介したいと思います。(PhotoshopCS6使用) ものさしツールを使う まずは「ものさしツール」を使ってみます。 ものさしツールを選択して、ここがまっすぐになってほしいな~という基準になる線を引きます。 線を引き終わったらツールバーの右にある「レイヤーの角度補正」をクリックします。 すると・・・ 水平線がまっすぐになりました!が・・・しかし・・・まわりに余白が・・・前のものさしツールこの余白カットしてくれてたような気がしたんですが、CS6だとどうやるんだろう??と探してみた

    Photoshopで斜めになった写真を補正する方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • メディアサイトの記事ページをデザインするときに、参考になる数値まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、デザイナーのまきこです。モーニング娘。’16のオーディションのゆくえが気になる今日この頃です。 さて、LIGでは、日々たくさんの企業さまからさまざまなサイト制作についてのお問い合わせをいただいています。その中でわりとご依頼が多いのが、メディアサイトの制作です。 メディアサイトの制作でキモとなるのが、記事ページの文字周りのデザイン。ここがうまくいかないと、いくら魅力的な記事が書かれていても、ユーザーにしっかり読んでもらって価値を提供することができません。そこで今回は、世の中のメディアサイトやWebマガジンの中から「人気がある」「デザインのクオリティーが高い」とわたしが勝手に思うサイトを10点選び、記事ページの文字周りがどんな数値でデザインされているのかを調べてみました。 調べ方について 下記の図のような数値について、PCMac(ディスプレイ幅1440px)で、SPはiphone

    メディアサイトの記事ページをデザインするときに、参考になる数値まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • LIGデザイナーの仕事の進め方やコツとは?質問にお答えします! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。アートディレクターのぺちこです。 「あなたの質問にLIGのデザイナーがお答えします!」というテーマのもと、みなさまから募集した質問に答えています。今回は、仕事の進め方やコツについての質問にお答えしていきます! 仕事の進め方編 ターゲットやコンセプトなどが決まってから、トップページのワイヤーフレーム、デザインをするのに何時間ぐらいかけますか? よーいドン、と時間を計りながら作ったことはないので、明確に◯時間! と言い切ることは難しいのですが、LIGではTOPページデザインの期間をだいたい3~5営業日確保しています。 とはいえ、その日数の中で複数の案件をこなしたり、さまざまなミーティングに駆り出されたりするため、実際の平均は、1日4時間強くらいしかかけていないのでは? という印象です。 ……となると、トータルでは12~20時間ほど、というところでしょうか。 やはり実務をしていて感じ

    LIGデザイナーの仕事の進め方やコツとは?質問にお答えします! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 【スライス不要】Photoshop画像アセット生成の基本とつまずきがちな5つのコト | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    独学でつまずいていませんか? Photoshopの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください! →スクールの魅力が分かる資料はこちら!(資料請求) スライスせずに書き出せるPhotoshopの「画像アセット生成」って? 画像アセット生成とは、ファイルのレイヤーやレイヤーグループのコンテンツからJPEGやPNG等の画像アセットを生成するという、スライス作業を不要とする機能です。PhotoshopCCから実装されている機能で、CC2014以降は画像に加えてSVGの書き出しも可能となりました。 普段からコーディングもしているデザイナーさんは効率化のために早くから使ってい

    【スライス不要】Photoshop画像アセット生成の基本とつまずきがちな5つのコト | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • ついに「Adobe XD」の日本語版リリース!Webサイト制作がはかどり過ぎて楽しい | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。長野チーム・デザイナーのずんこです。 突然ですが、今日は何の日かわかりますか? ・ ・ ・ 答えは、デザイナーのみなさんお待ちかねの「Adobe XD」日語版のリリース日です! webデザインの現場でも存分に使える「Adobe XD」。アドビさんのご厚意とPRのため、一足早めに使わせてもらいました。 早速、その使用感についてレポートしていきます。 そもそも「Adobe XD」とはSketchやProttのいいとこ取りソフト 「Adobe XD」の正式名称は「Adobe Experience Design CC」。新しいUXデザインツールとして、プレビュー版が今年の春にリリースされ話題になりました。 公式の記事はこちら。 アドビの新しいUXデザインツール、Adobe XD (Preview 1) 登場! 使い方をクイックに解説 「Adobe XD」は、デザインが作成できるだけで

    ついに「Adobe XD」の日本語版リリース!Webサイト制作がはかどり過ぎて楽しい | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    今年もHTML5 Minutesに登壇してきました。こんにちは、先生です。 当日は「フロントエンド開発スピードをあげるための環境を作ってみた話」をしてきました。 今回はその環境を使ってみるまでの手順を書いていきたいと思います。 必要なものをインストール NodeJS Gulp WebPack Bower PhantomJS NodeJSとGulpのインストールは過去の記事「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」をご覧ください。 WebPackのインストール WebPackはさまざまな形式のモジュールを静的なファイルにまとめて出力してくれるツールで、拡張性が高く最近好んで使っています。 WebPack http://webpack.github.io/ インストールはnpmを使って簡単にできます。 npm install webpack -g ※ mac

    エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    初めまして。アメリカからやってきたUIデザイナーのCorey(コーリー)です。 LIGの転職サービス「Poole」でUIデザインをしています。 PhotoshopやIllustratorをメインとして使うデザイナーは多くいると思いますが、私はPhotoshopをほとんど使いません。1年前にSketchへ乗り換えたからです。 現在、日のデザイン界ではSketchはそれほど使われてないかもしれませんが、海外ではSketchが大ブームになっています。 今回は私が最強なPhotoshopからSketchへ乗り換えた理由をお伝えします。 Sketchへ乗り換えた理由(Why I Use Sketch) http://bohemiancoding.com/sketch/ 1. UI Design中心 Sketchは完全にWebとモバイルUIデザインの専用ツールなので、それ以外の余計な機能が入っていま

    UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • イラレ派に!マニュアルをIllustratorで作るときに取り入れたいInDesignコラボ技 | 株式会社LIG

    はじまして、デザイナーのすーちゃんです! 個人的に「Illustrator」は、全部小文字で「illustrator」と書くのが好きです。 デザイナーの皆さんはマニュアルを作成する際、どんなソフトを使っていますか? 今回は私が普段、マニュアルを作るときに使用しているソフトやその手順をご紹介したいと思います。 使うソフトはIllustratorとInDesign マニュアルを作成するときは、ほぼIllustratorとInDesignを使っています。 では、それぞれのメリット、デメリットを挙げながら、なぜこの2つのソフトを使うのかご説明したいと思います。 Illustratorのメリットとデメリット 一番の理由は、Illustratorが好きだから……ですが、わたしの個人的な好みは一旦置いておきます。 メリット 普段から使い慣れている(個人的に) 挿絵も同時に描ける 自由度が高く、その時々で

    イラレ派に!マニュアルをIllustratorで作るときに取り入れたいInDesignコラボ技 | 株式会社LIG
    yaoki_dokidoki
    yaoki_dokidoki 2016/05/20
    イラレで作って全部インデザインにはり込むのか
  • photoshopで画像や文字を回転させる(画像の変形、回転ビュー機能) | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    ※編集部注:この記事は、2011年に公開された記事を元に再構成しました。 Photoshopで画像や文字を回転させる方法 今回はこの画像を回転させます。テキストレイヤーも、やり方は同じです。 自由に回転させる場合 [編集]→[変形]→[回転]を選択。 画像の右下あたりにカーソルを合わせると矢印が出現するので、その状態でクリックしながら回転したい方向に画像を動かします。 角度を指定して回転させる場合 [編集]→[変形]→[回転]を選択。ここまでは先ほどと同じです。 オプションバーの角度マークの数字を指定すると、角度を指定して回転できます。 例えば「30」を入力すると、右に30度回転します。 90度、180度ならワンクリックで回転できる [編集]→[変形] から、以下のうち任意の角度を選択します。 180°回転 90°回転(時計回り) 90°回転(反時計回り) 回転ビューで見た目だけを回転させ

    photoshopで画像や文字を回転させる(画像の変形、回転ビュー機能) | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    yaoki_dokidoki
    yaoki_dokidoki 2016/04/16
    R押しながら操作すればいいのか。捗るな
  • Illustratorのライブペイントって便利だなァ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    今回は使ってみないと損!Illustratorのライブペイントについてご紹介します。 みなさんはイラストレーターで↓このような図を塗り分ける場合どのように作業しますか? わたしの場合、パスファインダを使って塗りと線をバラバラにしてみたり、 Ctr+B(背面へコピー)などを使ってみたり、 線の下に塗り用のパスをちまちま描いてみたり、 とまぁたぶんものすごく効率の悪いことをしてました。 がしかし・・・今ではこんなチートツールがついているんですね!!「ライブペイント」 この機能はおおざっぱにいうと、 重なり順などは無視して、閉じられている領域に色を流し込める機能です。 使い方は、塗り分けたいオブジェクトを選択して、「オブジェクト」→「ライブペイント」→「作成」で塗り分ける領域を作ります。 次にツールの中からライブペイントを選択します。 塗り分けたいオブジェクトにカーソルを近づけると閉じられた領域

    Illustratorのライブペイントって便利だなァ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 「了解しました」より「承知しました」が適切とされる理由と、その普及過程について | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    あなたは「了解しました」と「承知しました」、どちらをよく使いますか? 【アンケート】 「了解しました」と「承知しました」、どっちを多く使いますか? — 菊池良 / Kikuchi Ryo (@kossetsu) 2016年2月25日 ツイッターでアンケートしたところ、こんな感じでした。わずかに「承知しました」の方が多いですね。 この2つの言い回しですが、「了解しました」よりも「承知しました」を使う方が正しい、とよく言われています。 僕がこれを初めて知ったとき、強い違和感を覚えました。理由は 「了解しました」をよく使っていた 日常でもビジネスでも「承知しました」を使っている人を見たことがなかった ある日、急に言われ始めた からです。「承知」が日常的な言い回しではなかったので、気になったんですね。 そこで調べてみたところ、いつから言われ始めて、どういう経路で定着したのかがある程度わかりました。

    「了解しました」より「承知しました」が適切とされる理由と、その普及過程について | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    yaoki_dokidoki
    yaoki_dokidoki 2016/03/02
    ちょうど昨日この件で調べていた
  • MySQLでdecimalを使うときの注意点 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    たいした話ではないんですが、僕自身がちょいと勘違いをしていたことがあったので、備忘録的なメモってことで……。 MySQLで少数を扱うようなとき、型にdecimalを使うことがあるかと思います。 decimalの場合、桁数を(M,D)の形で指定します。内訳は以下の通りです。 M…扱う少数の最大桁数 D…小数点以下の桁数 例えば、(6,3)という桁数を指定したら、全体で6桁、小数点以下は3桁、という解釈になります。123.456みたいな数値を扱えることになりますね。 僕はそこをちょっと勘違いしてて、上記でいうところのMっていうのは、小数点以上の桁数の指定だと思ってました。だから(6,3)って指定したら、123456.789みたいな数値を扱う状態になるのかなという認識でした。 先日、decimalの桁数を(3,3)で指定して、0~100のパーセンテージを持つカラムを作成したんですけど、どんなにデ

    MySQLでdecimalを使うときの注意点 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 誰でも簡単にできるGoogle Analyticsのランディングページ分析入門 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。LIGのアートディレクターの長岡です。 前回の記事「誰でも簡単にできるGoogle Analyticsの検索キーワード分析入門」でオーガニック検索に関する分析方法を紹介させていただきましたが、今回はランディングページの分析方法について書いていきたいと思います。 ランディングページって? ランディングページとは、ユーザーが一番最初に閲覧するページのことです。 大まかには以下のような形でのサイトへのランディングが考えられます。 検索エンジンからのランディング 広告からのランディング SNSからのランディング ブログ記事からのランディング ブラウザのお気に入りなどによるダイレクトでのランディング その他にもいろいろなランディング経路があるかと思いますが、「どういった経路からの流入が多いのか」「ランディング先からはどのページへ遷移しているのか」をきちんと分析することで、多くのことが分か

    誰でも簡単にできるGoogle Analyticsのランディングページ分析入門 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • わずか5分!? AWSのEC2でクラウドなウェブサーバーを構築してみた | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    はじめまして。五反田の「Clisk(クリスク)」という会社でシステムエンジニアなどをしている芹沢と申します。盟友であるLIGのゴウさんや紳さんと酒を酌み交わしているうちに、LIGブログに記事を書かせていただくことになりました。よろしくお願いいたします。 AWSとは? http://aws.amazon.com/jp/ AWSAmazon Web Servicesの略)とは、Amazonが提供しているクラウドサービスの総称で、その中にはさまざまなサービスが含まれています。 EC2(仮想サーバー)、S3(ストレージ)、RDS(リレーショナルデータベース)、CloudWatch(監視)など、たくさんのサービスが提供されていて、それらのITインフラのリソースを、使いたいときに、使いたいものを、使いたいだけ、必要なスペックで、利用することができるのが特徴です。 多くのサービスは管理画面から操作でき

    わずか5分!? AWSのEC2でクラウドなウェブサーバーを構築してみた | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • jQueryを高速に動作させるためのポイント5つ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    最近東京にこなれてきたどうも僕です。何がこなれてきたって?電子マネーさ!東京ならSuica、Edy、Waon、なんでもタッチで買えちゃうんだぜ!コンビニで清算するとき、「支払いはEdyで」と一言、そして、読み取り機にソフトタッチ。支払いのシャリーンという音とともに僕の白い歯がキラーンとかがやくのさっ! そんな東京にこなれてきた僕が、今日はjQueryを使う上で気をつけておきたいポイントを何点か紹介しようと思うよ! jQueryって便利だけど、もとはJavaScriptで、インタプリタ言語で、コンパイル時に最適化なんてされないから、書き方一つで意外とパフォーマンスに差が出てくるんだよね!開発時は高スペックのPCで見てるから気づかないかもしれないけど、あなたのサイト、低スペックマシンとかモバイル端末でみたら、もっさもさかもよ! っというわけで、jQueryを使う上で気をつけたいポイントを挙げて

    jQueryを高速に動作させるためのポイント5つ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 背景画像のフリー素材サイト10選!デザインで悩んだときに役立ちます | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    1. Subtle Patternsオススメ https://www.toptal.com/designers/subtlepatterns/ 一番よく利用してます。商用利用可の、シンプルで使いやすいシームレスの画像がたくさんあります。 2. Background Labs http://backgroundlabs.com/ 色・タグから検索できます。花柄やイラストがはいった、カラフルで派手なパターンの画像やイラストが多いです。 3. pattern cooler https://www.patterncooler.com/ 選んだデザインの柄の大きさや色をカスタマイズできます。派手派手なデザインがほとんどなので使いどころは難しかもしれません。 4. TextureKing https://www.textureking.com/ テクスチャ画像をお探しのときはこちら。木目・コンクリート

    背景画像のフリー素材サイト10選!デザインで悩んだときに役立ちます | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 世界一即戦力な男がメンズファッションプラスで即戦力な装備を探してみた。 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    みなさん、こんにちは。「世界一即戦力な男」から「株式会社LIGのインターン」になった菊池です。 先日、新婚ホヤホヤで調子にのっている紳さんにこんな事を言われました。 「きみっていつも同じ服を着ているよね。」 「え……?(何いってんだコイツ…ウナギみたいな顔しやがって)」 いつも同じ服を着ている理由 そうなのです。ぼくはこれと同じ服をたくさん持っていて、それを着回しているのです。 iPhoneを開発したアップルの創業者であるスティーブ・ジョブズは、いつも黒のタートルネックにジーンズをはいていました。それは制服を決めることで、ファッションにかける時間を減らし、その分クリエイティブに力を入れよう、という意図があったと思われます。 ぼくもそんなジョブズ的な、きわめてジョブズ的なポリシーとして、同じ服を着ているのです。めんどくさいのではなく! 「もうちょっと服には気を使った方がいいよ。ファッション

    世界一即戦力な男がメンズファッションプラスで即戦力な装備を探してみた。 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    yaoki_dokidoki
    yaoki_dokidoki 2013/05/08
    面白い
  • 1