はじめまして。デザイナーののっちです。 好きな業務の1つがバナー制作なのですが、最初の頃は「決められた空間に文字と画像を詰めて、さらには綺麗に見せて……」と、まるでジグソーパズルのようなあの作業にもの、すごーーく時間がかかっていました。これは新米デザイナーなら、誰でも一度は通る道だと思います。 そこで今回は、新米デザイナーが知っておきたい“美しい”バナーを“効率的”に制作するためのフローについてまとめます。 独学でつまずいていませんか？ バナーデザインの作り方を効率的に学びたい、プロに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年2月に編集部が情報を更新し

こんにちは、メディア事業部のエリーです。 みなさん、「パーマリンク」というものをご存知ですか？ 生きていく上でおおよそ必要のなさそうな単語ですが、WordPressでブログを書いている人やこれからブログを始めようとしている人には、とても重要なものです。 またブログに限らず、Webサイトの根幹に関わる要素の1つとして、初期段階で構成を決定した方が良いと言われています。 そこで今回は、一体どんなパーマリンクが理想的なのか、なぜ重要なのかをWordPressに最適化した超高速サーバー「Z.com for WordPress」さんにお聞きしました。 ▼目次 パーマリンクってなに？ 理想的なパーマリンクは？ 上記パーマリンクが理想的な4つの理由 なんでシンプルなURL構造が良いの？ 日本語URLはダメなの？ パーマリンクとSEOの関係は？ 解析しやすいパーマリンクって？ パーマリンクの設定の仕方 1

こんにちは。ライターの内藤です。 本日は純国産オープンソースのECサイトプラットフォーム、EC-CUBEのデフォルトでよくある不満を解消したいと思います。 ちょっとしたことですが、お客様に使いやすく、運営側にも嬉しい小技をご紹介します。 少し古いですが、EC-CUBEバージョン2.11.3をベースにしています。 目次 会員登録後の画面にカートへ移動ボタンをつける 会員登録画面のカスタマイズ 会員登録ステップを削除したい場合 カート機能が不要の場合 会員登録後の画面にカートへ移動ボタンをつける EC-CUBEのデフォルトで地味に使いづらいのが、会員登録後の画面。 仮会員制を取らない場合の購入手続きの流れは通常は下記の通りです。 カートから購入手続きボタンを押す 会員ログインと会員登録・登録無し購入の選択画面が表示される 会員登録を選ぶと、会員情報の入力画面へ 登録ボタンで会員登録が完了する

今回はIllustratorで手書き風イラストを作成する方法をご紹介します。手書き風といっても色々な種類があるので、自分好みのものを見つけてください。 もとの画像はこれ！ 春らしく桜で！ ※編集部注：2011年に公開された記事を最新の情報に更新しました。 1. 落書き風 [効果]→[スタイライズ]→[落書き]の順で選択。 デフォルトの設定だとちょっとざっくりしすぎているので・・・ 今回はこんな感じに線幅や感覚を調整しました。 これで完成！ 簡単です。 2. 粗いパステル画 [効果]→[アーティスティック]→[粗いパステル画]の順に選択。 こちらもデフォルトだとざっくりなので微調整して、完成です! こちらはほんのり手書き風。 3. ストローク（スプレー） [効果]→[ブラシストローク]→[ストローク（スプレー）]の順に選択。 こちらはクレヨンで書いたような手書き風イラストになります。 効果は

こんにちは！　ディレクターの まさしです。 ディレクターは、お客様の悩みや課題を解決へ導く、とても素敵な仕事ですよね！ お客様の課題が解決され、喜びが共有できたときが、ディレクターにとって一番嬉しい瞬間でしょう。（制作物が公開されたときよりも） さて、お客様の課題解決をしたい場合は、まずはヒアリングから始めますよね。 今日は、このヒアリングという部分において、一番重要だなと思っていることをお話しできればと思います。 何が一番重要かは、人によって違うかと思いますが、僕にとって一番だなと思う点をご紹介させていただきます。 ディレクターの皆さんと、その先にいるクライアントさんに少しでも良い気づきがあれば幸いです。 お客様が本当に依頼したいこと 僕がヒアリング時に一番重要だなと思っていることは、ビジネスモデルです。 まずWebサイトを作る際に、主に考えないといけない目線としては以下の2つがあげられ

お疲れさまです、モモコです。 ゲリラ豪雨に備えて折り畳み傘を常にバッグに入れているせいか、何となく肩が重いです。 今回はCSS3だけで作れるローディングアニメーションを5つご紹介します！ 閲覧の際にはモダンブラウザ（最新のGoogleChromeなど）をご利用下さい。 FADE LOADING FADE LOADING 入力した文字がふわっと浮かび上がるローディングアニメーション。 質感と動きが合っていてがとてもエレガントです。 CSS3 loading animation experiment CSS3 loading animation experiment DIRT3というゲームのUIにインスピレーションを得て作成されたローディングアニメーション。 多彩な変化がついており、とてもクールなアニメーションになっています。 CSS only loading spinners CSS onl

Googleの提供するPageSpeed Insightsを参考にして、Webサイトを高速化したときにやったこと こんにちは、ライターのモリイです。 Googleが提供しているPageSpeed Insightsというサービスがあります。これは、ウェブページのコンテンツを解析してページの読み込み速度を測定し、速度の改善策を提案してくれるサービスです。 たかがページの読み込み時間、と侮ることはできません。 読み込み時間が短くなることで、 Googleに評価される。 ユーザーにストレスをあたえない。 というメリットがあり、Google検索での順位をあげるためや、ユーザに離脱されないためにも重要な要素となります。今回は、このツールを使ってサイトの読み込みスピードを実際に上げてみようと思います。 ページの読み込みスピードを分析してみる 画面中央のフォームにサイトのURLを入力し、「分析」をクリック

はじめまして。LIGでデザイナーをしています、マチルダです。 最近、前職でお世話になったデザイナーの先輩から「アラサーは品が命」という格言をいただいたので、全体的に生き方を見直そうと思っています。 今後とも末永くよろしくお願いいたします。 数年前から、スマートフォンサイト制作のお仕事が多くなりました。 そんなこんなで、「スマートフォンでの使いやすさ」とはなんぞや？を考える日々を送っているのですが、使いやすさって、実際に使ってみないとわからない…でも、自分で実装する技術も時間もない…！ 今回はそんなデザイナーさんでも簡単で素早くプロトタイプを作成できるツール「Prott（プロット）」の使い方をご紹介したいと思います。 ※今回は分かりやすいよう、LIGのスマートフォンサイトをサンプルにして作成手順をご説明いたします。 「Prott（プロット）」とは？ Prott（プロット）はUIデザインで有名

デザイナーのありさんです。 LIGが運営しているWebクリエイタースクール「デジタルハリウッドSTUDIO by LIG」で、授業の講師を担当することがあります。今回は、デザインを勉強している受講生さんに個人的におすすめしているデザインの勉強に役立つ本を25冊ご紹介します！ 同じジャンルの本を1冊ではなく何冊も読むと、同じことをいろいろな切り口で説明してもらえている気がして理解が深まります。なのでいつも本はいっぱい買っちゃう派です（笑）。そのなかでも初級〜中級者の方向けにおすすめの本をピックアップしています。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめ

お疲れさまです、デザイナーのモモコです。 今回はAdobe Illustratorを使って可愛らしいイラストが描けるチュートリアル記事をご紹介します。 これからイラレをどんどん使っていきたい！という初心者の方にも優しい記事を中心に集めてみました。 Adobe Illustratorを使って可愛いイラストが描けるチュートリアル6つ Create a Gentle Flat Oriental Pattern in Adobe Illustrator https://design.tutsplus.com/tutorials/create-a-gentle-flat-oriental-pattern-in-adobe-illustator–cms-20952 オリエンタルなパターンが作れるチュートリアル。 提灯や扇子など、あしらいを変えれば夏にも正月にも活躍しそうな要素がそろっています。 Cre

先日、個人でやっているサイトをリニューアルしていたのですが、想像以上に色の組み合わせについて悩んでしまいました。 デザインの知識が皆無の私にはハードルが高すぎたようで、文字、リンク、バナー、背景などの色をベタベタ触っていたら、数時間後にはヘドロのような色彩美のサイトが誕生しました。絶望です。 そこで今回は、私のような素人でも参考になる配色見本サイトについて、用途別にまとめてみました。 「わからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！ ベースとなるカラーを設定したい 1． 原色大辞典 https://www.colordic.org/ いつも参考に

こんにちは、CTOのづやです。 前回はTwenn系の使い方について紹介しましたが、今回はTimeline系の使い方について紹介していきたいと思います。 こちらには読んで字の如く、いろいろいろいろなアニメーションをタイムラインで管理できる機能がそろっています。 非常に便利なので個人的によく使っております。 基本的な使い方 タイムラインオブジェクトを作り、行いたいイベントを追加していくイメージです。 下記のような感じが基本的な構成になるでしょうか。 // タイムライン作る var tl = new TimelineMax(); // idがmoveのtopを250pxにする動作を0秒後に呼ぶ tl.add(TweenMax.to("#move" , 5 , {top:"250px"}), 0); // idがmoveのleftを250pxにする動作を5秒後に呼ぶ tl.add(TweenMax

こんにちは、CTOのづやです。 サイトを作っていると「スクロールに応じて何かをさせたい」なんてことをよく思ったりするのではないでしょうか。 0から書いてもいいのですが、簡単にできたら、というときのためのプラグイン「ScrollMagic」を試してみました。 こんな例のような動きがつけられちゃうらしいので、早速紹介していきます。 使うための準備 まずはこちらのGitHubから。 ScrollMagicはjQuery PluginなのでjQueryが必須なのはもちろん、TweenMaxといったライブラリも必要になります。 読み込むときには当然それらも必要になりますので、↓のような感じで準備しましょう。 <script src="js/TweenMax.min.js"></script> <script src="js/jquery.min.js"></script> <script src="

こんにちは、デザイナーのサリーです。 今回はブログのアイキャッチにも使えるテキストエフェクトのフリー素材をまとめてみました（今回のアイキャッチでも使ってます！）。 PSDファイル形式なので、Photoshopでちょちょいと編集するだけで手の込んだエフェクトが使えちゃいます。 テキストエフェクト素材の使用方法 今回は「Grand Motel Text Effect」という素材を利用して、ざっくりした使用方法を説明していきます。素材によって微妙に使い方が異なりますが、基本的には同じような方法で編集できると思います。 STEP1. PSDファイルを開く こちらのPSDファイルのレイヤー構成はこんな感じ。 レイヤー構成は素材によってさまざまです。 こちらの素材は丁寧にレイヤー名に「Your text here(double-click the layer thumbnail)」と書いてありますね！

こんにちは。デザイナーの藤田です。 久しぶりにPhotoshopのtips記事をお届けします。 皆さんは�“水しぶき”などの背景が透けた画像の切り抜きに苦戦したことはありませんか？ ただ背景を切り抜くだけだと、透明感をなかなか表現できませんよね。 そこで今回は、“水しぶき”などの透け感がある画像をみずみずしく切り抜く方法をご紹介いたします。 ※今回の記事で使用している画像は下記サイトのものです。 water splash http://nihongo.istockphoto.com/stock-photo-13225547-water-splash.php Psd Soda Can Mock-Up Template http://www.pixeden.com/psd-mock-up-templates/psd-soda-can-mock-up-template Photoshopで“水し

こんにちは、デザイナーのぺちこです。 近頃はいろいろな動きを取り入れたサイトが増えていて、「Webって楽しい」というワクワクが今まで以上に感じられます。 私が最近ちょっと気になっているのは、サイト全体の大きな動きではなく、いちパーツである「テキストリンク」のHoverアニメーションです。 大きな部分の動きや同じリンクでも目につきやすいボタンリンクには、いろいろなバリエーションの動きが取り入れられています。一方でテキストリンクについては、ありきたりなエフェクトになってしまっているサイトがまだまだ多いなぁ、と思われます。 そんな中で、そういった些細な部分も手を抜かず作り込まれているサイトを見ると、思わず「おっ！」と立ち止まってしまいます。 サイトコンセプトに沿った効果的なアニメーションを入れることができれば、ワンランク上のWebサイトになっていくはず。 というわけで今回は、テキストリンクのHo

こんにちは、フロントエンドエンジニアのおじいちゃんです。 今回はパフォーマンスを意識したアニメーションを実装できる「requestAnimationFrame」について書きたいと思います。 requestAnimationFrameとは requestAnimationFrameは、アニメーション実装時など、再描画が頻繁に行われる処理に使えるメソッドになります。 window.requestAnimationFrame() メソッドは、ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。 引用元：MDN setTimeoutやsetIntevalと比較されることが多いですが、主に以下のような違いがあります。 requestAnima

こんにちは、デザイナーの白浜です。 最近写真のレタッチすることがちょくちょくありまして、その中で個人的に「これはすごい！」と思ったPhotoshopのハイパスフィルターを使った方法について、紹介していきたいと思います。 「ググってわからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！ ハイパスフィルターを使ったレタッチの手順 1. レイヤーを2枚複製する まずは元画像を2枚コピーします。レイヤー名は任意なのであとでわかりやすいように「ぼかし」と「ハイパス」と名前をつけています。 2. コピーしたレイヤーにフィルタをかける 複製したレイヤーにそれぞれフィル

みなさんはじめまして。ディレクターのモトキです。幹と書きまして本名です。 最近カナダから帰ってきたのですが、日本はほんとにご飯が美味しくて、女性が可愛いなーとしみじみ思ってます。よろしくお願いします！ さて、つい先日新しいiMacとMac miniが発売されましたね。新型MacBook Air登場の噂もありますし、新しくMacユーザになるという方も増えていくのではないでしょうか。僕もLIGでMacBook Airが支給されたのですが、この機会にアプリについてあらためて見直してみました。 というわけで今回は、新しくMacユーザになった方、これからもっとMacで作業効率を上げていきたいという方へ向け、超絶便利なMac初心者向けアプリを紹介していきたいと思います！ （Windowsユーザーの方も使えるものが多数あるのでぜひご覧ください。） 作業が捗るおすすめMacアプリ10選 1. Everno

こんにちは。ディレクターのエリカです。 Google マップがカスタマイズできることはよく知られていると思いますが、難しそうでなかなか手が出せない・・・と思っていませんか？ Google 公式が提供している「Styled Maps Wizard」を使えば、驚くほど簡単に Google マップをカスタマイズできるのでご紹介いたします。 ※このページは、Styling Wizard: Google Maps APIsの旧サービス：Styled Maps Wizardの紹介記事です。 Styling WizardでGoogleマップをカスタマイズ！ Styling Wizardはこちらから利用できます https://mapstyle.withgoogle.com/ ※現在はStyling Wizardにリニューアルしています。 STEP1. 全体の色を変えてみよう 画面左の Selectors