お問い合わせフォームを作ってみる -実装編①:入力・確認・完了画面の作成-

こんにちは、ユアサです。 前回までの記事では、お問い合わせフォームを作成していく上で実装したい入力項目やライブラリを紹介しました。今回はそれらを使って、土台の部分となってくる入力画面、確認画面、完了画面を作成していきたいと思います。 ↓前回の…

Webデザインの色を忠実に!カラーマネジメントを理解しよう

こんにちは、ハヤマです。 ストックフォトサービスを提供する「Shutterstock」から、2021年のカラートレンドが発表されました。 選ばれた3色ですが、上品だけれども生命力を感じるナチュラルカラーで、個人的にも好きな配色です。 詳しくはこちら。(英語サ…

JavaScriptで階層の深いハンバーガーメニューを作る

こんにちは、ナカムラです。 今回はスマホサイトではお馴染みのハンバーガーメニューの作り方をご紹介します。 タイトルに「階層の深い」と書きました。 ページ数の多いサイトでは、第2階層、第3階層とメニューが深くなっていきます。 階層が深くなるとメニ…

LaravelでDBからマイグレーションファイルを作成する方法

こんにちは、コバヤシです。 今回はLaravel5.5以降でデータベースからマイグレーションファイルを作成する方法について書きます。 DB->マイグレーションファイル 以前はXethron /migrations-generator があって便利に使っていたのですが、これってLaravel5.4…

お問い合わせフォームを作ってみる -ライブラリ編-

こんにちは、ユアサです。 前回の記事でも記述していた通りフォーム作成をしていこうと思っていましたが、それより以前の記事で紹介したComposerを使用して(どうせなら勉強したことの実践も兼ねて)既存のライブラリを活用していく方向にしようかな?と考え…

[Adobe MAX 2020]Adobe XDに興味があるPhotoshop使いのWebデザイナーにおすすめ!なセッション

こんにちは、ハヤマです。 先週、「Adobe MAX 2020」が開催されましたね。 今年はコロナ禍もありオンラインでの開催となりました。 今回はこのイベントのコンテンツについてお話ししていきたいと思います。 「Adobe MAX」とは? 「Adobe MAX」は、アドビシス…

簡単!Vue.jsでCKEditorを使う方法

こんにちは、コバヤシです。 今回はVue.jsでCKEditorを使う方法を書いていきたいと思います。 CKEditorとは テキストエリアをWYSIWYG形式のエディタに変更するライブラリになります。 ckeditor.com CKEditor4とCKEditor5がありますが、今回はCKEditor4を導入…

脱jQuery!文字量によって表示を制限するJavaScript

こんにちは、ナカムラです。 今回は文字数などのコンテンツ量によって表示を制限するJavaScriptを解説していきます。 jQueryを使わないネイティブでの書き方になります。 ※IEにも対応したい場合は注意点があります。詳しくは解説の中で記載しています。 作り…

お問い合わせフォームを作ってみる -要素・機能編-

こんにちは、ユアサです。 今回は、簡易的ではありますがお問い合わせを想定したフォームの作成をしていきます。 フォーム作成のお手伝いはしたことがありますが、一人で作成したことがなかったので一つひとつ順を追って作成していきたいと思います。 まずは…

Adobe XDでデザイン!プラグインを活用しよう

こんにちは、ハヤマです。 最近、弊社もワイヤーフレーム以外にデザイン制作においてもAdobe XDを用いるようになりました。 Adobe XDのメリットはなんといってもデータの軽さではないでしょうか。 配置画像をどんなに拡大・縮小しても画像自体に劣化が発生し…